WPF製作好看的側邊欄控件

WPF製作好看的側邊欄控件

界面代碼如下：

<Window x:Class="側邊停靠按鈕.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:側邊停靠按鈕"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid  Background="#3b3b3b" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Rectangle Fill="#111111"/>
        <ListBox Name="lsb" Foreground="White" Margin="0 50 0 0" Background="Transparent" BorderThickness="0" FontSize="16">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <StackPanel x:Name="Container"  Height="35" Orientation="Horizontal" VerticalAlignment="Center" Background="Transparent"  Cursor="Hand" >
                                    <Rectangle Fill="DarkRed" VerticalAlignment="Stretch" Width="5" Visibility="Hidden" Name="Rectagle"/>
                                    <ContentPresenter VerticalAlignment="Center" Margin="15 0 0 0"/>
                                </StackPanel>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="true">
                                        <Setter Property="Visibility" Value="Visible" TargetName="Rectagle"/>
                                        <Setter Property="Background" Value="#3a3a3a" TargetName="Container"/>
                                    </Trigger>

                                    <Trigger Property="IsMouseOver" Value="true">
                                        <Setter Property="Visibility" Value="Visible" TargetName="Rectagle"/>
                                        <Setter Property="Background" Value="#1a1a1a" TargetName="Container"/>
                                    </Trigger>

                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBoxItem>Weapon</ListBoxItem>
            <ListBoxItem>Talk</ListBoxItem>
            <ListBoxItem>Sell</ListBoxItem>
            <ListBoxItem>Status</ListBoxItem>
            <ListBoxItem>Spell</ListBoxItem>
        </ListBox>
    </Grid>
</Window>

效果如下：