Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Tagged as

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

, 5 Jun 2010 CPOL
Part two of the two-part tutorial on how to customize your WPF application using Styles and Control Templates
BlackCrystal_Code.zip
BlackCrystal
bin
Debug
BlackCrystal.vshost.exe
BlackCrystal.vshost.exe.manifest
Release
BlackCrystal.vshost.exe
BlackCrystal.suo
BlackCrystal.vbproj.user
My Project
MyExtensions
Settings.settings
obj
x86
Debug
BlackCrystal_MarkupCompile.i.cache
DesignTimeResolveAssemblyReferences.cache
DesignTimeResolveAssemblyReferencesInput.cache
TempPE
My Project.Resources.Designer.vb.dll
Release
BlackCrystal_MarkupCompile.i.cache
DesignTimeResolveAssemblyReferences.cache
DesignTimeResolveAssemblyReferencesInput.cache
TempPE
My Project.Resources.Designer.vb.dll
BlackCrystal.suo
BlackCrystal_Demo.zip
BlackCrystal.exe
BlackCrystal.vshost.exe
BlackCrystal.vshost.exe.manifest
PresentationFramework.Aero.dll
PresentationFramework.Luna.dll
<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)

Share

About the Author

JOSUEYERAY
Software Developer Plain Concepts
Spain Spain
MCP - .NET Framework 2.0 Application Development Fundamentals
MCTS - .NET Framework 3.5 Windows Forms Application
MCTS - .NET Framework 3.5 Windows Presentation Foundation

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141216.1 | Last Updated 5 Jun 2010
Article Copyright 2010 by JOSUEYERAY
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid