<Window xmlns="https://github.com/avaloniaui"
        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"
        Height="239" Width="248"
        x:Class="AvaloniaUI.MultiPartTemplates"
        Title="MultiPartTemplates">

    <Window.Resources>
        <!-- ===== 基礎畫刷定義 ===== -->
        <SolidColorBrush x:Key="StandardBorderBrush" Color="#888" />
        <SolidColorBrush x:Key="StandardBackgroundBrush" Color="#FFF" />
        <SolidColorBrush x:Key="HoverBorderBrush" Color="#DDD" />
        <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="Blue" />
        <SolidColorBrush x:Key="SelectedForegroundBrush" Color="White" />
        <SolidColorBrush x:Key="GlyphBrush" Color="#444" />

        <LinearGradientBrush x:Key="ListBoxBackgroundBrush" StartPoint="0,0" EndPoint="1,0.001">
            <GradientStop Offset="0.0" Color="White" />
            <GradientStop Offset="0.6" Color="White" />
            <GradientStop Offset="1.2" Color="#DDDDDD" />
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="StandardBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0.0" Color="#FFF" />
            <GradientStop Offset="1.0" Color="#CCC" />
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0.0" Color="#BBB" />
            <GradientStop Offset="0.1" Color="#EEE" />
            <GradientStop Offset="0.9" Color="#EEE" />
            <GradientStop Offset="1.0" Color="#FFF" />
        </LinearGradientBrush>
    </Window.Resources>
    <Window.Styles>
        <!-- ========== ListBox 樣式 ========== -->
        <Style Selector="ListBox">
            <Setter Property="Background" Value="{StaticResource StandardBackgroundBrush}"/>
            <Setter Property="BorderBrush" Value="{StaticResource StandardBorderBrush}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="CornerRadius" Value="3"/>
            <Setter Property="Padding" Value="2"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="Template">
                <ControlTemplate>
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding CornerRadius}">
                        <ScrollViewer Focusable="False">
                            <ItemsPresenter Margin="{TemplateBinding Padding}"/>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter>
        </Style>

        <!-- ========== ListBoxItem 樣式 ========== -->
        <Style Selector="ListBoxItem">
            <Setter Property="Padding" Value="4,2"/>
            <Setter Property="CornerRadius" Value="3"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="Transitions">
                <Transitions>
                    <DoubleTransition Property="FontSize" Duration="0:0:0.2"/>
                    <BrushTransition Property="Background" Duration="0:0:0.2"/>
                </Transitions>
            </Setter>
            <Setter Property="Template">
                <ControlTemplate>
                    <Border Name="Border"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}"
                            CornerRadius="{TemplateBinding CornerRadius}"
                            Padding="{TemplateBinding Padding}">
                        <ContentPresenter Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </ControlTemplate>
            </Setter>

            <!-- 鼠標Hover狀態 -->
            <Style Selector="^:pointerover">
                <Setter Property="BorderBrush" Value="{StaticResource HoverBorderBrush}"/>
                <Style.Animations>
                    <Animation Duration="0:0:1" PlaybackDirection="Alternate" IterationCount="2">
                        <KeyFrame Cue="0%">
                            <Setter Property="FontSize" Value="14"/>
                        </KeyFrame>
                        <KeyFrame Cue="100%">
                            <Setter Property="FontSize" Value="20"/>
                        </KeyFrame>
                    </Animation>
                </Style.Animations>
            </Style>

            <!--選中狀態-->
            <Style Selector="^:selected">
                <Setter Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/>
                <Setter Property="Foreground" Value="{StaticResource SelectedForegroundBrush}"/>
            </Style>    
        </Style>

        <!-- 垂直 ScrollBar 模板 -->
        <Style Selector="ListBox /template/ ScrollViewer /template/ ScrollBar:vertical">
            <Setter Property="Width" Value="15"/>
            <Setter Property="Template">
                <ControlTemplate>
                    <Grid RowDefinitions="18,*,18">
                        <RepeatButton Grid.Row="0" Name="PART_LineUpButton" Background="{StaticResource StandardBackgroundBrush}">
                            <Path Fill="{StaticResource GlyphBrush}"
                                  Data="M 0 4 L 8 4 L 4 0 Z"
                                  Width="8" Height="4" />
                        </RepeatButton>

                        <Track Grid.Row="1"
                               Name="PART_Track"
                               Minimum="{TemplateBinding Minimum}"
                               Maximum="{TemplateBinding Maximum}"        
                               Value="{TemplateBinding Value, Mode=TwoWay}"    
                               ViewportSize="{TemplateBinding ViewportSize}"
                               Orientation="{TemplateBinding Orientation}"
                               IsDirectionReversed="True">
                            <Track.Thumb>
                                <Thumb Name="PART_Thumb"/>
                            </Track.Thumb>
                        </Track>

                        <RepeatButton Grid.Row="2" Name="PART_LineDownButton" Background="{StaticResource StandardBackgroundBrush}">
                            <Path Fill="{StaticResource GlyphBrush}"
                                  Data="M 0 0 L 4 4 L 8 0 Z"
                                  Width="8" Height="4" />
                        </RepeatButton>
                    </Grid>
                </ControlTemplate>
            </Setter>
        </Style>

        <!-- 滾動條 Thumb -->
        <Style Selector="ListBox /template/ ScrollViewer /template/ ScrollBar /template/ Thumb">
            <Setter Property="Background" Value="{StaticResource StandardBackgroundBrush}" />
            <Setter Property="BorderBrush" Value="{StaticResource StandardBorderBrush}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="CornerRadius" Value="12" />
            <Setter Property="Template">
                <ControlTemplate>
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding CornerRadius}" />
                </ControlTemplate>
            </Setter>

            <!-- 鼠標懸停狀態 -->
            <Style Selector="^:pointerover">
                <Setter Property="Background" Value="{StaticResource HoverBorderBrush}" />
                <Setter Property="BorderBrush" Value="{StaticResource HoverBorderBrush}" />
            </Style>

            <!-- 鼠標離開狀態 -->
            <Style Selector="^:not(:pointerover)">
                <Setter Property="Background" Value="{StaticResource StandardBackgroundBrush}" />
                <Setter Property="BorderBrush" Value="{StaticResource StandardBorderBrush}" />
            </Style>
        </Style>
    </Window.Styles>

    <Grid Margin="10">
        <ListBox>
            <ListBoxItem>?? Apple</ListBoxItem>
            <ListBoxItem>?? Banana</ListBoxItem>
            <ListBoxItem>?? Grape</ListBoxItem>
            <ListBoxItem>?? Orange</ListBoxItem>
            <ListBoxItem>?? Watermelon</ListBoxItem>
            <ListBoxItem>?? Strawberry</ListBoxItem>
            <ListBoxItem>?? Pineapple</ListBoxItem>
            <ListBoxItem>?? Kiwi</ListBoxItem>
            <ListBoxItem>?? Cherry</ListBoxItem>
            <ListBoxItem>?? Peach</ListBoxItem>
        </ListBox>
    </Grid>
</Window>