c# - WPF: Canvas 和 zIndex？它是如何工作的？

Question

我有以下布局:

<s:SurfaceWindow x:Class="Prototype_Concept_2.SurfaceWindow1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="http://schemas.microsoft.com/surface/2008"
    Title="Prototype_Concept_2"
    >
  <s:SurfaceWindow.Resources>
    <ImageBrush x:Key="WindowBackground" Stretch="None" Opacity="0.6" ImageSource="pack://application:,,,/Resources/WindowBackground.jpg"/>
  </s:SurfaceWindow.Resources>

  <Grid Background="{StaticResource WindowBackground}" >

            <Grid Name="ProjectsGrid">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>

                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBox Name="ProjectsHeader" Grid.ColumnSpan="2" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="25" Text="Please choose one of the following projects" Grid.Row="0"></TextBox>
                <s:SurfaceButton Name="BottomButton" HorizontalAlignment="Right" FontSize="20" Width="100" Grid.Column="1" Grid.Row="2" Foreground="White" Content="Refresh"></s:SurfaceButton>
                <s:SurfaceListBox Background="Black" Grid.ColumnSpan="2" Name="ProjectsList" Grid.Row="1" ItemsSource="{Binding Projects}"></s:SurfaceListBox>
                <Label Name="ProjectsFooter" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" FontSize="15" Content="Fetching projects data ..."></Label>

            </Grid>

        <Grid ShowGridLines="True"  Name="SmellHeader" Visibility="Collapsed">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="256"></ColumnDefinition>
            <ColumnDefinition Width="256"></ColumnDefinition>
            <ColumnDefinition Width="256"></ColumnDefinition>
            <ColumnDefinition Width="256"></ColumnDefinition>
        </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="38"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>

            <Rectangle Grid.Column="0" Grid.Row="0" Fill="Black"></Rectangle>
            <Viewbox Grid.Column="0" Grid.Row="0" s:Contacts.PreviewContactDown="BrainClass_PreviewContactDown">
                <Label Background="Black" Foreground="White" Content="BrainClass" HorizontalContentAlignment="Center"></Label>
            </Viewbox>

            <Rectangle Grid.Column="1" Grid.Row="0" Fill="Black"></Rectangle>
            <Viewbox Grid.Column="1" Grid.Row="0">
                <Label Background="Black" Foreground="White" Content="God Class" HorizontalContentAlignment="Center"></Label>
            </Viewbox>

            <Rectangle Grid.Column="2" Grid.Row="0" Fill="Black"></Rectangle>
            <Viewbox Grid.Column="2" Grid.Row="0">
                <Label Background="Black" Foreground="White" Content="Tradition Breaker" HorizontalContentAlignment="Center"></Label>
            </Viewbox>

            <Rectangle Grid.Column="3" Grid.Row="0" Fill="Black"></Rectangle>
            <Viewbox Grid.Column="3" Grid.Row="0">
                <Label Background="Black" Foreground="White" Content="RefusedParent Bequest" HorizontalContentAlignment="Center"></Label>
            </Viewbox>
        </Grid>
        <Canvas Name="RootLayer" Grid.Row="1" Grid.ColumnSpan="4">
        </Canvas>
    </Grid>
</s:SurfaceWindow>

我向 RootLayer 添加了一些 Ellipse。稍后我想重新订购它们:

internal void setFocus(SourceManager manager)
        {
            Console.WriteLine("Set focus to class " + getFullName());

            foreach (SourceFile sf in manager.getBrainClasses())
            {
                sf.getVisualizer().Fill = Brushes.Red;
                Canvas.SetZIndex(sf.getVisualizer(), 0);
            }

            this.getVisualizer().Fill = Brushes.Blue;

            Canvas.SetZIndex(this.getVisualizer(), 1);

            manager.window.RootLayer.InvalidateArrange();
            manager.window.RootLayer.InvalidateVisual();
        }

Ellipse 被 this.getVisualizer() 引用；然而，什么都没有改变？我怎样才能把一个椭圆放在前面？

Answer 1

从您的代码帖子中并不能完全清楚椭圆是如何添加到 Canvas 上的，但这里有一个小示例，它基本上可以完成您想要做的事情:

<Grid>
  <Canvas x:Name="RootLayer" Width="500" Height="500" />
</Grid>

然后在后面代码的构造函数中，创建一些省略号:

for (int i = 0; i < 10; i++)
{
  Ellipse e = new Ellipse
    {
      Width = 100,
      Height = 100,
      Fill = new SolidColorBrush(
               Color.FromArgb(0xDD, 
                    (Byte) r.Next(255)
                    (Byte) r.Next(255)
                    (Byte) r.Next(255))),
      Stroke = Brushes.Black,
      StrokeThickness = 1,
    };
  e.MouseUp += new MouseButtonEventHandler(e_MouseUp);
  Canvas.SetLeft(e, r.Next(400));
  Canvas.SetTop(e, r.Next(400));
  RootLayer.Children.Add(e);
}

处理鼠标点击省略号的事件处理器

void e_MouseUp(object sender, MouseButtonEventArgs e)
{
  foreach (UIElement item in RootLayer.Children)
    Panel.SetZIndex(item, 0);

  Panel.SetZIndex((UIElement)sender, 1);
}

使用上面的代码，只要单击一个椭圆(鼠标移开)，它就会升到该 Canvas 中所有其他椭圆的上方。