WPF中Canvas使用

首先知道Canvas有Left、Right、Top和Bottom這四個屬性，放入Canvas的元素通過這四個屬性來決定它們在Canvas里面的位置。

比如：

Xaml：

<Canvas HorizontalAlignment="Left" Height="299" Margin="133,52,0,0" VerticalAlignment="Top" Width="526">
            <Button Content="Button" Canvas.Left="72" Canvas.Top="45" Width="75" Height="38"/>
            <Button Content="Button" Canvas.Left="124" Canvas.Top="173" Width="75" Height="42"/>
            <Button Content="Button" Canvas.Left="387" Canvas.Top="64" Width="75" Height="46"/>
            <Button Content="Button" Canvas.Left="336" Canvas.Top="196" Width="75" Height="42"/>
</Canvas>

 如圖：

 

Canvas中Z-Index屬性：

不加Z-Index屬性時，Canvas里面的元素會按照后定義的優先級更高，優先級高的可以覆蓋優先級低的。

例：Xaml：

<Grid>
        <Canvas HorizontalAlignment="Left" Height="299" Margin="133,52,0,0" VerticalAlignment="Top" Width="526">
            <Rectangle Fill="#FF5D5DC8" Height="45" Canvas.Left="22" Stroke="Black" Canvas.Top="25" Width="100"/>
            <Rectangle Fill="#FFEAEAF6" Height="50" Canvas.Left="94" Stroke="Black" Canvas.Top="46" Width="100"/>
            <Rectangle Fill="#FFCD6650" Height="100" Canvas.Left="166" Stroke="Black" Canvas.Top="84" Width="59"/>
            <Ellipse Fill="#FFB1CD50" Height="100" Canvas.Left="195" Stroke="Black" Canvas.Top="143" Width="100"/>
        </Canvas>
</Grid>

這里后定義的會覆蓋先定義的子元素：

下面看看使用了Z-Index屬性：

Xaml：

<Grid>
        <Canvas HorizontalAlignment="Left" Height="299" Margin="133,52,0,0" VerticalAlignment="Top" Width="526">
            <Rectangle Fill="#FF5D5DC8" Panel.ZIndex="3" Height="45" Canvas.Left="22" Stroke="Black" Canvas.Top="25" Width="100"/>
            <Rectangle Fill="#FFEAEAF6" Panel.ZIndex="2" Height="50" Canvas.Left="94" Stroke="Black" Canvas.Top="46" Width="100"/>
            <Rectangle Fill="#FFCD6650" Panel.ZIndex="1" Height="100" Canvas.Left="166" Stroke="Black" Canvas.Top="84" Width="59"/>
            <Ellipse Fill="#FFB1CD50" Panel.ZIndex="0" Height="100" Canvas.Left="195" Stroke="Black" Canvas.Top="143" Width="100"/>
        </Canvas>
</Grid>

如圖：

可以看出，Z-Index越小優先級越高，那么如果定義的Z-Index一樣會是誰優先級更高呢？接着看。

 

Xaml：

<Grid>
        <Canvas HorizontalAlignment="Left" Height="299" Margin="133,52,0,0" VerticalAlignment="Top" Width="526">
            <Rectangle Fill="#FF5D5DC8" Panel.ZIndex="3" Height="45" Canvas.Left="22" Stroke="Black" Canvas.Top="25" Width="100"/>
            <Rectangle Fill="#FFEAEAF6" Panel.ZIndex="3" Height="50" Canvas.Left="94" Stroke="Black" Canvas.Top="46" Width="100"/>
            <Rectangle Fill="#FFCD6650" Panel.ZIndex="3" Height="100" Canvas.Left="166" Stroke="Black" Canvas.Top="84" Width="59"/>
            <Ellipse Fill="#FFB1CD50" Panel.ZIndex="3" Height="100" Canvas.Left="195" Stroke="Black" Canvas.Top="143" Width="100"/>
        </Canvas>
</Grid>

如圖：

可以看出，Z-Index一樣的時候，誰后定義誰的優先級就高。