在XAML中同时显示2个单独的画布的问题

时间:2013-06-19 11:08:33

标签: c# xaml windows-phone-8

我有画布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);

    }

所有这一切都有效。我得到了所有不同颜色方块的网格,但是当我按下textblock时,我希望我的第二个画布弹出,但这不会发生。我在整个过程中添加了断点,它遍历所有这些断点,我只是看不到第二个画布

表示用于捕获文本块上的点击的代码

        //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 ......

2 个答案:

答案 0 :(得分:0)

你好我已经尝试过你的代码了,我发现你的问题有点令人困惑所以我假设你希望你的第二个画布可以在文本块上看到。但是您没有在文本块上注册任何事件处理程序,因此没有事件被触发,这就是为什么首先使您的文本块可见并添加一个tap事件处理程序,您可以在其上设置第二个画布的可见性。 还有tempName_Tap eventHandler你是颜色gridbox eventhandler而不是文本块tap事件处理程序所以它永远不会注册你点击文本块。 另外在开始时你写道,你想要在网格框上点击第二个画布,以便你的代码工作正常。

答案 1 :(得分:0)

我拿了你的xaml /代码并用我自己的图片测试了它。没有图像(或整个项目)来看看他们如何在画布上绘图,我不得不说你的2幅画布有可能没有正确的Z-Index。它们通常是一层叠在另一层之上而不是向一侧移动。您可以通过设置SetZIndex来设置哪个Canvas位于另一个之上。试着打电话:

    //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订单可能有点多余。但我遇到了一个画布而不是显示的事件,所以我同时做了两件事。