在 XAML 中同时显示 2 个单独的画布时出现问题
本文关键字：单独 布时出 问题 XAML 显示 | 更新日期: 2023-09-27 18:19:05
我有画布A和画布B。画布 A 包含一个图像和一个具有不同颜色方块的网格。 numSelectCan是一个不同的形象。
一旦我单击一个正方形，就会触发一个事件，该事件应将numSelectCan的可见性状态设置为可见，然后它应该显示与画布 A 重叠。
事实并非如此。我已经尝试了一切，但我根本无法numSelectCan出现。在开发过程中，将显示numSelectCan并且工作正常。在运行时，numSelectCan刚刚消失。我尝试禁用 A，但仍然没有成功。
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,0,10,10">
<Controls:RoundButton x:Name="btnCancel" PressedBrush="Orange" Foreground="White" BorderBrush="White" ImageSource="/Assets/Appgraphics/Buttons/cancel.png" HorizontalAlignment="Left" VerticalAlignment="Bottom" Click="btnCancel_Click"/>
<Controls:RoundButton x:Name="btnQuestion" PressedBrush="Orange" Foreground="White" ImageSource="/Assets/Appgraphics/Buttons/questionmark.png" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0" Click="btnQuestion_Click" BorderBrush="White"/>
<Controls:RoundButton x:Name="btnConfirm" PressedBrush="Orange" Foreground="White" BorderBrush="White" ImageSource="/Assets/Appgraphics/Buttons/check.png" HorizontalAlignment="Right" VerticalAlignment="Bottom" Click="confirmSelection"/>
<Canvas x:Name="picCanvas" HorizontalAlignment="Center" Width="582" Height="320">
<Image x:Name="imgBackCC" Height="320" Width="582" Stretch="Fill" HorizontalAlignment="Center" Source="" Margin="0,0,0,0"/>
</Canvas>
<Canvas x:Name="numSelectCan" HorizontalAlignment="Center" Height="155" Visibility="Visible" Width="530" VerticalAlignment="Center">
<Image x:Name="numSelBackground" Source="/Assets/Appgraphics/UserInterface/numFieldBackground.png" Height="155" Width="530" Stretch="Fill"/>
<Image x:Name="numFieldButton1" Source="/Assets/Appgraphics/UserInterface/numField0.png" Width="70" Height="70" Canvas.Left="5" Canvas.Top="5"/>
<Image x:Name="numFieldButton2" Source="/Assets/Appgraphics/UserInterface/numField1.png" Width="70" Height="70" Canvas.Left="80" Canvas.Top="5"/>
<Image x:Name="numFieldButton3" Source="/Assets/Appgraphics/UserInterface/numField2.png" Width="70" Height="70" Canvas.Left="155" Canvas.Top="5"/>
<Image x:Name="numFieldButton4" Source="/Assets/Appgraphics/UserInterface/numField3.png" Width="70" Height="70" Canvas.Left="230" Canvas.Top="5"/>
<Image x:Name="numFieldButton5" Source="/Assets/Appgraphics/UserInterface/numField4.png" Width="70" Height="70" Canvas.Left="305" Canvas.Top="5"/>
<Image x:Name="numFieldButton6" Source="/Assets/Appgraphics/UserInterface/numField5.png" Width="70" Height="70" Canvas.Top="80" Canvas.Left="5"/>
<Image x:Name="numFieldButton7" Source="/Assets/Appgraphics/UserInterface/numField6.png" Width="70" Height="70" Canvas.Left="80" Canvas.Top="80"/>
<Image x:Name="numFieldButton8" Source="/Assets/Appgraphics/UserInterface/numField7.png" Width="70" Height="70" Canvas.Left="155" Canvas.Top="80"/>
<Image x:Name="numFieldButton9" Source="/Assets/Appgraphics/UserInterface/numField8.png" Width="70" Height="70" Canvas.Left="230" Canvas.Top="80"/>
<Image x:Name="numFieldButton10" Source="/Assets/Appgraphics/UserInterface/numField9.png" Width="70" Height="70" Canvas.Left="305" Canvas.Top="80"/>
<Image x:Name="numFieldDelButton" Source="/Assets/appgraphics/UserInterface/numFieldDelete.png" Width="145" Height="145" Canvas.Top="5" Canvas.Left="380" />
</Canvas>
</Grid>
</Grid>
不确定这里出了什么问题，或者我是否错过了一件简单的事情，例如为不同的画布设置显示顺序
任何想法/建议不胜感激。
更新我从我的 xaml 添加了整个内容面板。
这是在初始化页面时为我创建网格的函数
public void createGrid()
{
//create the grid
Grid backGrid = new Grid();
backGrid.Width = 530;
backGrid.Height = 285;
backGrid.HorizontalAlignment = HorizontalAlignment.Center;
backGrid.VerticalAlignment = VerticalAlignment.Center;
backGrid.ShowGridLines = false;
backGrid.Margin = new Thickness(25, 15, 0, 0);
//define columns
for (int c = 0; c < 10; c++)
{
ColumnDefinition colDef = new ColumnDefinition();
backGrid.ColumnDefinitions.Add(colDef);
}
//define rows
for (int r = 0; r < 6; r++)
{
RowDefinition rowDef = new RowDefinition();
backGrid.RowDefinitions.Add(rowDef);
}
//colour counter
int counter = 0;
//create textboxes
for (int r = 0; r < 6; r++)
{
for (int c = 0; c < 10; c++)
{
//set the coulour of the canvases based on the counter
if (counter == 4)
{
counter = 0;
}
SolidColorBrush tempBrush = new SolidColorBrush();
switch (counter)
{
case 0:
tempBrush = new SolidColorBrush(Colors.Red);
break;
case 1:
tempBrush = new SolidColorBrush(Colors.Orange);
break;
case 2:
tempBrush = new SolidColorBrush(Colors.Blue);
break;
case 3:
tempBrush = new SolidColorBrush(Colors.Green);
break;
}
string canName = c.ToString() + r.ToString();
string txtName = "text" + c.ToString() + r.ToString();
string tempCanName = "canvas" + c.ToString() + r.ToString();
//creating the canvas
Canvas tempCanvas = new Canvas();
tempCanvas.Name = tempCanName;
tempCanvas.Background = tempBrush;
tempCanvas.HorizontalAlignment = HorizontalAlignment.Stretch;
tempCanvas.VerticalAlignment = VerticalAlignment.Stretch;
tempCanvas.Margin = new Thickness(2);
//creating the textblock
TextBlock tempName = new TextBlock();
tempName.Width = 32;
tempName.Height = 32;
tempName.Name = txtName;
tempName.Foreground = new SolidColorBrush(Colors.White);
tempName.TextAlignment = TextAlignment.Center;
tempName.Margin = new Thickness(13, 0, 0, 0);
tempName.FontWeight = FontWeights.Bold;
tempName.HorizontalAlignment = HorizontalAlignment.Center;
tempName.VerticalAlignment = VerticalAlignment.Center;
tempName.Visibility = Visibility.Visible;
tempName.FontSize = 30;
tempName.Tap += tempName_Tap;
//adding the canvas to the grid
Grid.SetRow(tempCanvas, r);
Grid.SetColumn(tempCanvas, c);
//adding all items into the canvas and into the grid
tempCanvas.Children.Add(tempName);
backGrid.Children.Add(tempCanvas);
//increment counter
counter++;
}
}
//add the grid into the mainpage
picCanvas.Children.Add(backGrid);
}
所有这些都有效。我得到了带有所有不同颜色方块的网格，但是当我按文本块时，我希望弹出我的第二个画布，但这不会发生。我添加了断点，它贯穿了所有断点，我只是没有看到第二个画布
这是用于捕获文本块上的点击的代码
//function that handels the event when a textblock is tapped
private void tempName_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
//create a copy of the object that triggerd this event
TextBlock tempBlock = sender as TextBlock;
//create a string from the name of this textblock and then cut of the textpart from the name
string tempName = tempBlock.Name;
tempName = tempName.Substring(4);
//move the canvas top or bottom based on which row the current selection is in
string currentRow = tempName.Substring(1);
if ((currentRow == "0") || (currentRow == "1") || (currentRow == "2"))
{
numSelectCan.VerticalAlignment = VerticalAlignment.Top;
}
else
{
numSelectCan.VerticalAlignment = VerticalAlignment.Bottom;
}
//show the number selector control
numSelectCan.Visibility = Visibility.Visible;
}
我仍然坚持这一点。不能numSelectCan出现...
你好，我已经尝试了你的代码，我发现你的问题有点令人困惑，所以我假设你希望你的第二个画布在点击文本块时可见。 但是您尚未在点击文本块上注册任何事件处理程序，因此没有触发任何事件 这就是为什么首先使您的文本块可见并添加一个点击事件处理程序，您可以在其上设置第二个画布的可见性。此外tempName_Tap eventHandler 是你的颜色网格框事件处理程序，而不是文本块点击事件处理程序，所以它永远不会注册你点击文本块。同样在开始时，您写道您希望第二个画布在点击网格框时可见，因为您的代码工作正常。
我拿了你的 xaml/代码，用我自己的图像测试了它。 如果没有图像(或整个项目(来查看它们在画布上的绘制方式，我不得不说，您的 2 张画布可能没有正确的 Z-Index。 它们通常一层一层地堆叠在一起，而不是移到一侧。 您可以通过设置SetZIndex来设置哪个画布位于另一个画布之上。 尝试致电：
//show the number selector control
numSelectCan.Visibility = Visibility.Visible;
Canvas.SetZIndex(numSelectCan, 5);
并再次隐藏它：
//Hide the number selector control
numSelectCan.Visibility = Visibility.Hidden;
Canvas.SetZIndex(numSelectCan, -5);
当然，隐藏和更改 ZIndex 顺序可能有点多余。 但是我在其中一个画布拍摄事件而不是显示的画布时遇到了麻烦，所以我两者都做了。