Click here to Skip to main content
15,881,776 members
Articles / Desktop Programming / WPF

WPF: Customize your Application with Styles and Control Templates (Part 2 of 2)

Rate me:
Please Sign up or sign in to vote.
4.92/5 (30 votes)
5 Jun 2010CPOL12 min read 115.4K   12.4K   79  
Part two of the two-part tutorial on how to customize your WPF application using Styles and Control Templates
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wintheme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
    
    <!-- DARK BACKGROUND -->
    <LinearGradientBrush x:Key="DarkBackground" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Offset="0" Color="#FF333344"></GradientStop>
        <GradientStop Offset="1" Color="#FF666677"></GradientStop>
    </LinearGradientBrush>
    <!-- LIGHT BACKGROUND -->
    <LinearGradientBrush x:Key="LightBackground" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Offset="0" Color="#FF9999AA"></GradientStop>
        <GradientStop Offset="1" Color="#FFDDDDFF"></GradientStop>
    </LinearGradientBrush>    
    <!-- CONTROL BACKGROUND -->
    <SolidColorBrush x:Key="BaseColor" Color="#99000000"></SolidColorBrush>
    
    <!-- GLASS EFFECT -->
    <LinearGradientBrush x:Key="GlassFX" StartPoint=".5,0" EndPoint=".5,.5">
        <GradientStop Offset="1" Color="#33DDDDDD"></GradientStop>
        <GradientStop Offset="1" Color="#33000000"></GradientStop>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="GlassFXDisabled" StartPoint=".5,0" EndPoint=".5,.5">
        <GradientStop Offset="1" Color="#33BBBBBB"></GradientStop>
        <GradientStop Offset="1" Color="#11000000"></GradientStop>
    </LinearGradientBrush>
    
    <!-- GLOW EFFECT -->
    <RadialGradientBrush x:Key="GlowFX" GradientOrigin=".5,1" Center=".5,1">
        <GradientStop Offset="0" Color="#990000FF"></GradientStop>
        <GradientStop Offset=".5" Color="#660000DD"></GradientStop>
        <GradientStop Offset="1" Color="#33000000"></GradientStop>
    </RadialGradientBrush>
    <RadialGradientBrush x:Key="GlowFXPressed" GradientOrigin=".5,1" Center=".5,1">
        <GradientStop Offset="0" Color="#660000CC"></GradientStop>
        <GradientStop Offset="1.2" Color="#33FFFFFF"></GradientStop>
    </RadialGradientBrush>
    <LinearGradientBrush x:Key="GlowFXRowPressed">
        <GradientStop Offset="0" Color="#660000FF"></GradientStop>
        <GradientStop Offset=".7" Color="#660000AA"></GradientStop>
        <GradientStop Offset="1" Color="#66000000"></GradientStop>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="GlowFXProgress">
        <GradientStop Offset="0" Color="#660099FF"></GradientStop>
        <GradientStop Offset=".99" Color="#660022AA"></GradientStop>
        <GradientStop Offset="1" Color="#00000000"></GradientStop>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="GlowFXProgressAnimated" MappingMode="RelativeToBoundingBox">
        <GradientStop Offset="0" Color="#00000000"></GradientStop>
        <GradientStop Offset=".50" Color="#660099FF"></GradientStop>
        <GradientStop Offset="1" Color="#00000000"></GradientStop>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="GlowFXTabSelected" StartPoint=".5,1" EndPoint=".5,0">
        <GradientStop Offset="0" Color="#33DDDDDD"></GradientStop>
        <GradientStop Offset="1" Color="#332222FF"></GradientStop>
    </LinearGradientBrush>
    
    <!-- GLOW ANIMATION -->
    <Storyboard x:Key="GlowOut">
        <DoubleAnimation x:Name="AnimGlowOut" BeginTime="00:00:00" Storyboard.TargetName="GlowRectangle" Duration="00:00:00.250" From="1" To="0" Storyboard.TargetProperty="Opacity"></DoubleAnimation>
    </Storyboard>
    <Storyboard x:Key="GlowIn">
        <DoubleAnimation x:Name="AnimGlow" BeginTime="00:00:00" Storyboard.TargetName="GlowRectangle" Duration="00:00:00.250" From="0" To="1" Storyboard.TargetProperty="Opacity">
        </DoubleAnimation>
    </Storyboard>
    
    <!-- GROUPBOX -->
    <Style TargetType="{x:Type GroupBox}">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type GroupBox}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" MinHeight="20"></RowDefinition> <!-- Contenido -->
                            <RowDefinition Height="*"></RowDefinition> <!-- Titulo -->
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="10"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Border Grid.Row="0" Grid.Column="1" x:Name="BaseRectangleHead" Background="{StaticResource BaseColor}" CornerRadius="20,5,0,0"></Border>
                        <Border Grid.Row="0" Grid.Column="1" x:Name="GlassRectangleHead" CornerRadius="20,5,0,0"  Background="{StaticResource GlassFX}">
                            <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" Margin="10,2,2,2"></ContentPresenter>
                        </Border>
                        <Border Grid.Row="0" Grid.Column="1" x:Name="GlowRectangleHead" CornerRadius="20,5,0,0" Opacity="0" Background="{StaticResource GlowFX}"></Border>
                        <Border Grid.Row="0" Grid.Column="1" x:Name="ButtonBorderHead" Opacity="1" BorderBrush="Black" BorderThickness="1" CornerRadius="20,5,0,0"></Border>

                        <Border Grid.Row="1" Grid.ColumnSpan="3" x:Name="BaseRectangle" Background="{StaticResource BaseColor}" CornerRadius="10,0,10,0"></Border>
                        <Border Grid.Row="1" Grid.ColumnSpan="3" x:Name="GlassRectangle" CornerRadius="10,0,10,0"  Background="{StaticResource GlassFX}"></Border>
                        <Border Grid.Row="1" Grid.ColumnSpan="3" x:Name="GlowRectangle" CornerRadius="10,0,10,0" Opacity="0" Background="{StaticResource GlowFX}"></Border>
                        <Border Grid.Row="1" Grid.ColumnSpan="3" x:Name="ButtonBorder" Opacity="1" BorderBrush="Black" BorderThickness="1" CornerRadius="10,0,10,0">
                            <ContentPresenter RecognizesAccessKey="True"  Margin="5"></ContentPresenter>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Opacity" Value=".5"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
       
    <!-- TABCONTROL -->
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid Name="grdTab" Margin="1,0,0,0" Height="20">
                        <Border Name="BaseBorder" Margin="0,0,-4,0" Background="{StaticResource BaseColor}" CornerRadius="2,12,0,0" Height="20"></Border>
                        <Border Name="Border" Margin="0,0,-4,0" Background="{StaticResource GlassFX}" BorderBrush="Black"  BorderThickness="1,1,1,1" CornerRadius="2,12,0,0" Height="20" >
                            <Grid  Margin="12,2,12,2">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                    <ColumnDefinition Width="10"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <ContentPresenter x:Name="ContentSite" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" RecognizesAccessKey="True" Height="20"/>
                            </Grid>
                        </Border>
                        <Border x:Name="GlowRectangle" Margin="0,0,-4,0" CornerRadius="2,12,0,0" Opacity="0" Background="{StaticResource GlowFX}" Height="20"></Border>                        
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" Value=".5" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Background" TargetName="Border" Value="{StaticResource GlowFXTabSelected}" />
                        </Trigger>                        
                        <EventTrigger RoutedEvent="MouseLeave">
                            <EventTrigger.Actions>
                                <BeginStoryboard Storyboard="{StaticResource GlowOut}"></BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <EventTrigger.Actions>
                                <BeginStoryboard Storyboard="{StaticResource GlowIn}"></BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </ControlTemplate.Triggers>                    
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style  TargetType="{x:Type TabControl}">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid KeyboardNavigation.TabNavigation="Local">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="3"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                            <ColumnDefinition Width="3"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TabPanel Name="HeaderPanel" Grid.Row="0" Panel.ZIndex="1" Grid.Column="1"  Margin="0,0,4,-1" IsItemsHost="True" KeyboardNavigation.TabIndex="1" Background="Transparent" />
                        <Border Name="BaseBorder" Grid.Row="1" Grid.ColumnSpan="2" Background="{StaticResource BaseColor}"  BorderBrush="Black" BorderThickness="1" CornerRadius="5"></Border>
                        <Border Name="Border" Grid.Row="1" Grid.ColumnSpan="2" Background="{StaticResource GlassFX}"  BorderBrush="Black" BorderThickness="1" CornerRadius="5" 
                                KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2" Opacity=".7" >
                            <ContentPresenter Name="PART_SelectedContentHost" Margin="4" ContentSource="SelectedContent" />
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" Value=".5" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- PROGRESSBAR -->
    <Style TargetType="{x:Type ProgressBar}">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <Grid MinHeight="14" MinWidth="20">
                        <Border x:Name="BaseRectangle" Background="{StaticResource BaseColor}" CornerRadius="10,0,10,0"></Border>
                        <Border x:Name="GlassRectangle" CornerRadius="10,0,10,0"  Background="{StaticResource GlassFX}"></Border>
                        <Border x:Name="animation" CornerRadius="10,0,10,0" Opacity=".7" Background="{StaticResource GlowFXProgress}" HorizontalAlignment="Left"></Border>
                        <Border x:Name="PART_Indicator" CornerRadius="10,0,10,0" Background="{StaticResource GlowFXProgress}" HorizontalAlignment="Left"></Border>
                        <Border x:Name="PART_Track" BorderThickness="1" CornerRadius="10,0,10,0" BorderBrush="Black"></Border>
                        <Border x:Name="BordeCabeceraSombra" BorderThickness="2" CornerRadius="10,0,10,0" BorderBrush="DarkGray" Opacity=".2" Margin="1,1,1,0"></Border>
                        <Label x:Name="Progress" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontWeight="Bold" Foreground="White" Opacity=".7" Content="{Binding Path=Value, RelativeSource={RelativeSource TemplatedParent}}"></Label>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsIndeterminate" Value="True">
                            <Setter Property="Visibility" TargetName="Progress" Value="Hidden"></Setter>
                            <Setter Property="Background" TargetName="PART_Indicator">
                                <Setter.Value>
                                    <MultiBinding>
                                        <MultiBinding.Converter>
                                            <wintheme:ProgressBarHighlightConverter/>
                                        </MultiBinding.Converter>
                                        <Binding Source="{StaticResource GlowFXProgressAnimated}"/>
                                        <Binding Path="ActualWidth"  ElementName="BaseRectangle"/>
                                        <Binding Path="ActualHeight" ElementName="BaseRectangle"/>
                                    </MultiBinding>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" Value=".5"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    <!-- DATAGRID -->
    <!-- COLUMN HEADER -->
    <Style TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate x:Name="ctltmplDGCHead" TargetType="DataGridColumnHeader">
                    <Grid Height="30">
                        <Border x:Name="BaseRectangle" Background="{StaticResource BaseColor}" CornerRadius="2,12,0,0"></Border>
                        <Border x:Name="GlassRectangle" CornerRadius="2,12,0,0"  Background="{StaticResource GlassFX}"></Border>
                        <Border x:Name="GlowRectangle" CornerRadius="2,12,0,0" Opacity="0" Background="{StaticResource GlowFX}"></Border>
                        <Border x:Name="BordeCabecera" BorderThickness="1,1,1,0" CornerRadius="2,12,0,0" BorderBrush="Black"></Border>
                        <Border x:Name="BordeCabeceraSombra" BorderThickness="2,2,2,0" CornerRadius="2,12,0,0" BorderBrush="DarkGray" Opacity=".2" Margin="1,1,1,0"></Border>
                        <ContentPresenter x:Name="Contenido" Margin="6" Opacity=".7" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}"
                                          ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                        <Path Name="UpArrow" Fill="Cyan" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,2,7,0" Visibility="Hidden" Opacity=".6">
                            <Path.Data>
                                <PathGeometry>
                                    <PathFigure StartPoint="0,0">
                                        <LineSegment Point="7,0"/>
                                        <LineSegment Point="3.5,6"/>
                                        <LineSegment Point="0,0"/>
                                    </PathFigure>
                                </PathGeometry>
                            </Path.Data>
                        </Path>
                        <Path Name="DownArrow" Fill="Cyan" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,2,7,0" Visibility="Hidden" Opacity=".6">
                            <Path.Data>
                                <PathGeometry>
                                    <PathFigure StartPoint="0,6">
                                        <LineSegment Point="7,6"/>
                                        <LineSegment Point="3.5,0"/>
                                        <LineSegment Point="0,6"/>
                                    </PathFigure>
                                </PathGeometry>
                            </Path.Data>
                        </Path>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="SortDirection" Value="Descending">
                            <Setter TargetName="UpArrow" Property="Visibility" Value="Hidden"/>
                            <Setter TargetName="DownArrow" Property="Visibility" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="SortDirection" Value="Ascending">
                            <Setter TargetName="DownArrow" Property="Visibility" Value="Hidden"/>
                            <Setter TargetName="UpArrow" Property="Visibility" Value="Visible"/>
                        </Trigger>
                        <EventTrigger RoutedEvent="MouseLeave">
                            <EventTrigger.Actions>
                                <BeginStoryboard Storyboard="{StaticResource GlowOut}"></BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <EventTrigger.Actions>
                                <BeginStoryboard Storyboard="{StaticResource GlowIn}"></BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" TargetName="Contenido" Value=".3"></Setter>
                            <Setter Property="Opacity" TargetName="BordeCabecera" Value=".5"></Setter>
                            <Setter Property="Background" TargetName="GlassRectangle" Value="{StaticResource GlassFXDisabled}"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
    <Style x:Key="{x:Type DataGridColumnHeadersPresenter}" TargetType="{x:Type DataGridColumnHeadersPresenter}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridColumnHeadersPresenter}">
                    <Grid>
                        <ItemsPresenter />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="{x:Type DataGridCell}">
        <Setter Property="Background" Value="#DD000000" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridCell}">
                    <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsKeyboardFocusWithin" Value="True">
                <Setter Property="Background" Value="{StaticResource GlowFX}" />
            </Trigger>
            <Trigger Property="IsSelected" Value="true">
                <Setter Property="Background" Value="{StaticResource GlowFX}" />
            </Trigger>
        </Style.Triggers>
    </Style>
    <Style TargetType="{x:Type DataGridRow}">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Background" Value="{StaticResource GlassFX}"></Setter>
        <Setter Property="BorderThickness" Value="0,0,0,1" />
        <Setter Property="BorderBrush" Value="DarkBlue" />
        <Setter Property="Opacity" Value=".9"></Setter>
        <Setter Property="Height" Value="25"></Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Background" Value="#99333333" />
            </Trigger>
            <Trigger Property="IsSelected" Value="true">
                <Setter Property="Background" Value="{StaticResource GlowFXRowPressed}" />
                <Setter Property="BorderThickness" Value="2"></Setter>
                <Setter Property="BorderBrush" Value="DarkBlue"></Setter>
                <Setter Property="Foreground" Value="DarkBlue"></Setter>
            </Trigger>            
        </Style.Triggers>
    </Style>
    <Style TargetType="{x:Type DataGrid}">
        <Setter Property="Background" Value="{StaticResource BaseColor}"></Setter>
        <Setter Property="BorderBrush" Value="Black"></Setter>
        <Setter Property="HeadersVisibility" Value="Column"></Setter>
        <Setter Property="GridLinesVisibility" Value="None"></Setter>
        <Style.Triggers>
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Background" Value="#FF000000" />
                <Setter Property="Opacity" Value=".5"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
    
    <!-- SCROLLBAR -->
    <Style x:Key="LineButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate x:Name="tmplRepeatButton">
                    <Border Background="#FF222222" BorderBrush="DarkBlue" BorderThickness="1" CornerRadius="3">
                        <Path HorizontalAlignment="Center" VerticalAlignment="Center" Data="{Binding Path=Content,RelativeSource={RelativeSource TemplatedParent}}" Fill="Cyan" >
                        </Path>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="PageButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate x:Name="tmplRepeatButton">
                    <Border Background="#66000000" BorderBrush="Black" BorderThickness="1" CornerRadius="3">
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ScrollThumb" TargetType="{x:Type Thumb}">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate x:Name="tmplScrollThumb">
                    <Grid>
                    <Rectangle RadiusX="3" RadiusY="3" Fill="#66222222"></Rectangle>
                    <Border CornerRadius="3" BorderBrush="DarkBlue" Background="{StaticResource GlassFX}">
                        <Path HorizontalAlignment="Center" VerticalAlignment="Center" Data="{Binding Path=Content,RelativeSource={RelativeSource TemplatedParent}}">
                        </Path>
                    </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <ControlTemplate x:Key="VerticalScroll" TargetType="{x:Type ScrollBar}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="18"></RowDefinition>
                <RowDefinition Height="0.00001*"></RowDefinition>
                <RowDefinition Height="18"></RowDefinition>
            </Grid.RowDefinitions>
            <Border Grid.RowSpan="3" CornerRadius="3" BorderBrush="DarkBlue" BorderThickness="1" Opacity=".6"></Border>
            <RepeatButton Grid.Row="0" Style="{StaticResource LineButton}" Height="18" Command="ScrollBar.LineUpCommand" Content="M 0 4 L 8 4 L 4 0 Z">
            </RepeatButton>
            <Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="True">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Style="{StaticResource PageButton}" Command="ScrollBar.PageUpCommand" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="{StaticResource ScrollThumb}" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Style="{StaticResource PageButton}" Command="ScrollBar.PageDownCommand" />
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton Grid.Row="2" Style="{StaticResource LineButton}" Height="18" Command="ScrollBar.LineDownCommand" Content="M 0 0 L 4 4 L 8 0 Z">
            </RepeatButton>            
        </Grid>
    </ControlTemplate>
    <ControlTemplate x:Key="HorizontalScroll" TargetType="{x:Type ScrollBar}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="18"></ColumnDefinition>
                <ColumnDefinition Width="0.00001*"></ColumnDefinition>
                <ColumnDefinition Width="18"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Border Grid.ColumnSpan="3" CornerRadius="3" BorderBrush="DarkBlue" BorderThickness="1" Opacity=".6" ></Border>
            <RepeatButton Grid.Column="0" Style="{StaticResource LineButton}" Width="18" Command="ScrollBar.LineLeftCommand" Content="M 4 0 L 4 8 L 0 4 Z">
            </RepeatButton>
            <Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="False">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Style="{StaticResource PageButton}" Command="ScrollBar.PageLeftCommand" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="{StaticResource ScrollThumb}" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Style="{StaticResource PageButton}" Command="ScrollBar.PageRightCommand" />
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton Grid.Column="2" Style="{StaticResource LineButton}" Width="18" Command="ScrollBar.LineRightCommand" Content="M 0 0 L 4 4 L 0 8 Z">
            </RepeatButton>
        </Grid>
    </ControlTemplate>
    <Style TargetType="{x:Type ScrollBar}">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Vertical">
                <Setter Property="Width" Value="18"></Setter>
                <Setter Property="Height" Value="Auto"></Setter>
                <Setter Property="Template" Value="{StaticResource VerticalScroll}"></Setter>
            </Trigger>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Width" Value="Auto"></Setter>
                <Setter Property="Height" Value="18"></Setter>
                <Setter Property="Template" Value="{StaticResource HorizontalScroll}"></Setter>
            </Trigger>            
        </Style.Triggers>
    </Style>

    <!-- COMBOBOX -->
    <ControlTemplate x:Key="cmbToggleButton" TargetType="ToggleButton">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition Width="20"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Rectangle x:Name="BaseRectangle" Fill="{StaticResource BaseColor}" RadiusX="3" RadiusY="3" Grid.ColumnSpan="2"></Rectangle>
            <Rectangle x:Name="GlowRectangle" RadiusX="5" RadiusY="5" Opacity="0" Fill="{StaticResource GlowFX}" Grid.Column="0"></Rectangle>
            <Border  x:Name="Border" Grid.ColumnSpan="2" Background="{StaticResource GlassFX}" BorderBrush="Black" BorderThickness="1" CornerRadius="3" />
            <Border Grid.Column="0" CornerRadius="3,0,0,3" Margin="1" Background="{StaticResource GlassFX}" BorderBrush="DarkBlue"  BorderThickness="0,0,1,0" />
            <Path x:Name="Arrow" Grid.Column="1" Fill="Cyan" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/>
        </Grid>
        <ControlTemplate.Triggers>
            <EventTrigger RoutedEvent="ToggleButton.MouseLeave">
                <EventTrigger.Actions>
                    <BeginStoryboard Storyboard="{StaticResource GlowOut}"></BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger RoutedEvent="ToggleButton.MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard Storyboard="{StaticResource GlowIn}"></BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <Trigger Property="ToggleButton.IsChecked" Value="true">
                <Setter TargetName="Border" Property="Background" Value="{StaticResource GlowFXPressed}" />
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Opacity" TargetName="Border" Value=".3"></Setter>
                <Setter Property="Opacity" TargetName="Arrow" Value=".5"></Setter>
                <Setter Property="Background" TargetName="Border" Value="{StaticResource GlassFXDisabled}"></Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
        <Border x:Name="PART_ContentHost" Focusable="False" Background="Transparent" />
    </ControlTemplate>
    <Style TargetType="{x:Type ComboBox}">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="true"></Setter>
        <Setter Property="Foreground" Value="White" />                
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate x:Name="tmplTextBox" TargetType="ComboBox">
                    <Grid>
                        <ToggleButton Name="ToggleButton" Template="{StaticResource cmbToggleButton}" Grid.Column="2" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press">
                        </ToggleButton>
                        <ContentPresenter
            Name="ContentSite"
            IsHitTestVisible="False" 
            Content="{TemplateBinding SelectionBoxItem}"
            ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
            ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
            Margin="3,3,23,3"
            VerticalAlignment="Center"
            HorizontalAlignment="Left" />

                        <TextBox x:Name="PART_EditableTextBox" HorizontalAlignment="Stretch" Foreground="White" VerticalAlignment="Stretch" Margin="1,1,23,1" Focusable="True" Visibility="Hidden" IsReadOnly="{TemplateBinding ComboBox.IsReadOnly}"/>
                        <Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide">
                            <Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}">
                                <Rectangle x:Name="BaseRectangle" Fill="#99000000" RadiusX="3" RadiusY="3" Grid.ColumnSpan="2"></Rectangle>
                                <Border x:Name="DropDownBorder" Background="{StaticResource GlassFX}" BorderThickness="1" BorderBrush="DarkBlue" CornerRadius="3"/>
                                <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                </ScrollViewer>
                            </Grid>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasItems" Value="false">
                            <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{StaticResource GlassFXDisabled}"/>
                        </Trigger>
                        <Trigger Property="IsGrouping" Value="true">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                        </Trigger>
                        <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
                            <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4"/>
                            <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
                        </Trigger>
                        <Trigger Property="IsEditable" Value="true">
                            <Setter Property="IsTabStop" Value="false"/>
                            <Setter TargetName="PART_EditableTextBox" Property="Visibility"    Value="Visible"/>
                            <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <!-- TEXTBOX -->
    <Style TargetType="{x:Type TextBox}">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Foreground" Value="White" />        
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate x:Name="tmpltTextBox">
                    <Grid>
                        <Rectangle x:Name="BaseRectangle" Fill="{StaticResource BaseColor}" RadiusX="3" RadiusY="3"></Rectangle>
                        <Rectangle x:Name="GlassRectangle" RadiusX="5" RadiusY="5" Fill="{StaticResource GlassFX}"></Rectangle>
                        <Rectangle x:Name="GlowRectangle" RadiusX="5" RadiusY="5" Opacity="0" Fill="{StaticResource GlowFX}"></Rectangle>
                        <Border x:Name="BorderIntern" Opacity="1" BorderBrush="Black" BorderThickness="2" CornerRadius="3" Margin="1,1,-1,-1"></Border>
                        <Border x:Name="BorderExtern" Opacity="1" BorderBrush="#FF333333" BorderThickness="1" CornerRadius="3"></Border>
                        <ScrollViewer x:Name="PART_ContentHost" Opacity=".7" Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="{Binding Path=HorizontalAlignment, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="{Binding Path=VerticalAlignment, RelativeSource={RelativeSource TemplatedParent}}" Width="{Binding Path=Width, RelativeSource={RelativeSource TemplatedParent}}" Height="{Binding Path=Height, RelativeSource={RelativeSource TemplatedParent}}"></ScrollViewer>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="TextBox.LostFocus">
                            <EventTrigger.Actions>
                                <BeginStoryboard Storyboard="{StaticResource GlowOut}"></BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="TextBox.GotFocus">
                            <EventTrigger.Actions>
                                <BeginStoryboard Storyboard="{StaticResource GlowIn}"></BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" TargetName="PART_ContentHost" Value=".3"></Setter>
                            <Setter Property="Opacity" TargetName="BorderExtern" Value=".5"></Setter>
                            <Setter Property="Fill" TargetName="GlassRectangle" Value="{StaticResource GlassFXDisabled}"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <!-- BOTON -->
    <Style TargetType="{x:Type Button}">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Foreground" Value="White" />        
        <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate x:Name="tmpltButton">
                        <Grid>
                            <Border x:Name="BaseRectangle" 
                                    Background="{StaticResource BaseColor}" 
                                    CornerRadius="10,0,10,0">
                            </Border>
                            <Border x:Name="GlassRectangle" 
                                    Background="{StaticResource GlassFX}" 
                                    CornerRadius="10,0,10,0">
                            </Border>
                            <Border x:Name="GlowRectangle" 
                                    Background="{StaticResource GlowFX}" 
                                    CornerRadius="10,0,10,0" 
                                    Opacity="0">
                            </Border>
                            <Border x:Name="ButtonBorder" 
                                    CornerRadius="10,0,10,0" 
                                    BorderBrush="Black" 
                                    Opacity="1"  
                                    BorderThickness="1">
                            </Border>
                            <ContentPresenter x:Name="ButtonContent" 
                                              Opacity=".7" 
                                              Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" 
                                              HorizontalAlignment="center" 
                                              VerticalAlignment="center">
                            </ContentPresenter>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="Button.MouseLeave">
                                <EventTrigger.Actions>
                                    <BeginStoryboard Storyboard="{StaticResource GlowOut}"></BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Button.MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard Storyboard="{StaticResource GlowIn}"></BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Button.LostFocus">
                                <EventTrigger.Actions>
                                    <BeginStoryboard Storyboard="{StaticResource GlowOut}"></BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Button.GotFocus">
                                <EventTrigger.Actions>
                                        <BeginStoryboard Storyboard="{StaticResource GlowIn}"></BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <Trigger Property="Button.IsPressed" Value="True">
                                <Setter Property="Background" TargetName="GlowRectangle" Value="{StaticResource GlowFXPressed}"></Setter>
                                <Setter Property="Opacity" TargetName="ButtonContent" Value="1"></Setter>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Opacity" TargetName="ButtonContent" Value=".3"></Setter>
                                <Setter Property="Opacity" TargetName="ButtonBorder" Value=".5"></Setter>
                                <Setter Property="Background" TargetName="GlassRectangle" Value="{StaticResource GlassFXDisabled}"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Freelance Developer
Spain Spain
MVP Windows Platform Development 2014
MVP Windows Phone Development 2013
MVP Windows Phone Development 2012

Comments and Discussions