Click here to Skip to main content
15,893,722 members
Search within:


Articles / Desktop Programming / WPF
 

Style Browser for WPF

Rate me:
Please Sign up or sign in to vote.
4.82/5 (9 votes)
25 Apr 2011CPOL5 min read 37.1K   2.6K   31  
Application for previewing XAML styles in WPF.
 
<ResourceDictionary
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <LinearGradientBrush x:Key="HorizontalSliderThumbHoverBackgroundInverted" EndPoint="0,0" StartPoint="0,1">
        <GradientStop Color="white" Offset="0"/>
        <GradientStop Color="#B8E2F9" Offset="0.5"/>
        <GradientStop Color="#B0DFF8" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="HorizontalSliderThumbHoverBorder" Color="#3C7FB1"/>
    <LinearGradientBrush x:Key="HorizontalSliderThumbPressedBackgroundInverted" EndPoint="0,0" StartPoint="0,1">
        <GradientStop Color="#B8E4FA" Offset="0.25"/>
        <GradientStop Color="#5EB4E3" Offset="0.5"/>
        <GradientStop Color="#4C8BB4" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="HorizontalSliderThumbPressedBorder" Color="#2C628B"/>
    <Geometry x:Key="SliderThumbDisabledGeometry">M -5,-10.5 L 5,-10.5 L 5,10.5 L -5,10.5 Z</Geometry>
    <Geometry x:Key="SliderPointedThumbDisabledGeometry">M 4.5,-8.5 L -4.5,-8.5 L -4.5,4.5 L -0.5,8.5 L 0.5,8.5 L 4.5,4.5 Z</Geometry>
    <LinearGradientBrush x:Key="HorizontalSliderThumbNormalBackgroundInverted" EndPoint="0,0" StartPoint="0,1">
        <GradientStop Color="White" Offset="0"/>
        <GradientStop Color="#F0EFEF" Offset="0.4"/>
        <GradientStop Color="#D6D5D5" Offset=".8"/>
    </LinearGradientBrush>
    <Geometry x:Key="SliderPointedThumbOuterBorderGeometry">M 4.5,-7.5 A 1 1 0 0 0 3.5,-8.5 L -3.5,-8.5 A 1 1 0 0 0 -4.5,-7.5 L -4.5,4.5 L -0.5,8.5 L 0.5,8.5 L 4.5,4.5 Z</Geometry>
    <Geometry x:Key="SliderPointedThumbMiddleBorderGeometry">M 3.5,-7.5 L -3.5,-7.5 L -3.5,4.5 L 0,8 L 3.5,4.5 Z</Geometry>
    <Style x:Key="HorizontalSliderUpThumbStyle" TargetType="{x:Type Thumb}">
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Height" Value="18"/>
        <Setter Property="Width" Value="10"/>
        <Setter Property="Foreground" Value="Gray"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Canvas SnapsToDevicePixels="true">
                        <Canvas.RenderTransform>
                            <TransformGroup>
                                <TransformGroup.Children>
                                    <TransformCollection>
                                        <RotateTransform Angle="180"/>
                                        <TranslateTransform X="5" Y="9"/>
                                    </TransformCollection>
                                </TransformGroup.Children>
                            </TransformGroup>
                        </Canvas.RenderTransform>
                        <Path x:Name="Background" Fill="{StaticResource HorizontalSliderThumbNormalBackgroundInverted}" Data="{StaticResource SliderPointedThumbOuterBorderGeometry}"/>
                        <Path x:Name="InnerBorder" Stroke="White" StrokeThickness="1" Data="{StaticResource SliderPointedThumbMiddleBorderGeometry}"/>
                        <Path x:Name="OuterBorder" Stroke="#FF929292" StrokeThickness="1" Data="{StaticResource SliderPointedThumbOuterBorderGeometry}"/>
                    </Canvas>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbHoverBackgroundInverted}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbHoverBorder}"/>
                        </Trigger>
                        <Trigger Property="Foreground" Value="Blue">
                            <Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbHoverBackgroundInverted}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbHoverBorder}"/>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="true">
                            <Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbPressedBackgroundInverted}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbPressedBorder}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Fill" TargetName="Background" Value="#FFF4F4F4"/>
                            <Setter Property="Stroke" TargetName="InnerBorder" Value="{x:Null}"/>
                            <Setter Property="Data" TargetName="OuterBorder" Value="{StaticResource SliderThumbDisabledGeometry}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="#FFAEB1AF"/>
                            <Setter Property="Data" TargetName="OuterBorder" Value="{StaticResource SliderPointedThumbDisabledGeometry}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="HorizontalSliderThumbHoverBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="white" Offset="0"/>
        <GradientStop Color="#B8E2F9" Offset="0.5"/>
        <GradientStop Color="#B0DFF8" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="HorizontalSliderThumbPressedBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#B8E4FA" Offset="0.25"/>
        <GradientStop Color="#5EB4E3" Offset="0.5"/>
        <GradientStop Color="#4C8BB4" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="HorizontalSliderThumbNormalBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="White" Offset="0"/>
        <GradientStop Color="#F0EFEF" Offset="0.4"/>
        <GradientStop Color="#D6D5D5" Offset=".8"/>
    </LinearGradientBrush>
    <Style x:Key="HorizontalSliderDownThumbStyle" TargetType="{x:Type Thumb}">
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Height" Value="18"/>
        <Setter Property="Width" Value="10"/>
        <Setter Property="Foreground" Value="Gray"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Canvas SnapsToDevicePixels="true">
                        <Canvas.RenderTransform>
                            <TranslateTransform X="5" Y="9"/>
                        </Canvas.RenderTransform>
                        <Path x:Name="Background" Fill="{StaticResource HorizontalSliderThumbNormalBackground}" Data="{StaticResource SliderPointedThumbOuterBorderGeometry}"/>
                        <Path x:Name="InnerBorder" Stroke="White" StrokeThickness="1" Data="{StaticResource SliderPointedThumbMiddleBorderGeometry}"/>
                        <Path x:Name="OuterBorder" Stroke="#FF929292" StrokeThickness="1" Data="{StaticResource SliderPointedThumbOuterBorderGeometry}"/>
                    </Canvas>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbHoverBackground}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbHoverBorder}"/>
                        </Trigger>
                        <Trigger Property="Foreground" Value="Blue">
                            <Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbHoverBackground}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbHoverBorder}"/>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="true">
                            <Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbPressedBackground}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbPressedBorder}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Fill" TargetName="Background" Value="#FFF4F4F4"/>
                            <Setter Property="Stroke" TargetName="InnerBorder" Value="{x:Null}"/>
                            <Setter Property="Data" TargetName="OuterBorder" Value="{StaticResource SliderThumbDisabledGeometry}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="#FFAEB1AF"/>
                            <Setter Property="Data" TargetName="OuterBorder" Value="{StaticResource SliderPointedThumbDisabledGeometry}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="HorizontalSliderTrackNormalBackground" Color="#FFE7EAEA"/>
    <LinearGradientBrush x:Key="HorizontalSliderTrackNormalBorder" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#FFAEB1AF" Offset="0.1"/>
        <GradientStop Color="White" Offset=".9"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="HuluSelectionbrush" Color="#7FFFFFFF"/>
    <Style x:Key="SliderRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="{DynamicResource HuluSelectionbrush}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Geometry x:Key="SliderThumbOuterBorderGeometry">M -5,-9.5 A 1 1 0 0 1 -4,-10.5 L 4,-10.5 A 1 1 0 0 1 5,-9.5 L 5,9.5 A 1 1 0 0 1 4,10.5 L -4,10.5 A 1 1 0 0 1 -5,9.5 Z</Geometry>
    <Geometry x:Key="SliderThumbMiddleBorderGeometry">M -4,-9.5 L 4,-9.5 L 4,9.5 L -4,9.5 Z</Geometry>
    <LinearGradientBrush x:Key="HuluBack" Opacity="0.85" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#99636363" Offset="0.5"/>
        <GradientStop Color="#7FA1A1A1" Offset="0.499"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="HuluBorder" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#FFAEB1AF" Offset="0.1"/>
        <GradientStop Color="White" Offset=".9"/>
    </LinearGradientBrush>

    <Style x:Key="PlayButton" TargetType="{x:Type ToggleButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="OnMouseEnter1">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipseForAnim" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="OnMouseLeave1">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipseForAnim" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.0"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <Border BorderThickness="0.5" BorderBrush="{DynamicResource HuluBorder}" Margin="0">
                        <Grid x:Name="grid1" Background="{DynamicResource HuluBack}">
                            <Ellipse x:Name="ellipseForAnim" IsHitTestVisible="False" Stroke="Black" StrokeThickness="0" Opacity="0" Margin="-10">
                                <Ellipse.Fill>
                                    <RadialGradientBrush>
                                        <GradientStop Color="Black"/>
                                        <GradientStop Color="White"/>
                                        <GradientStop Color="#66FFFFFF"/>
                                        <GradientStop Offset="1"/>
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Viewbox x:Name="viewbox" Margin="8,5" Stretch="Uniform">
                                <Grid x:Name="grid" Width="Auto" Height="Auto">
                                    <Path x:Name="playPath" Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="0" Data="M0.5,0.5 L25.750001,15.366 0.5,30.616 z" HorizontalAlignment="Center" Width="43.001" Margin="2,0"/>
                                    <Path x:Name="pausePath" Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="0" HorizontalAlignment="Left" Width="43.001" Data="M30.667999,0 L43.000999,0 43.000999,38.5 30.667999,38.5 z M0,0 L12.667,0 12.667,38.5 0,38.5 z" Opacity="0" Margin="2,0"/>
                                </Grid>
                            </Viewbox>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="False">
                            <Setter Property="Opacity" TargetName="pausePath" Value="0"/>
                            <Setter Property="Opacity" TargetName="playPath" Value="1"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Opacity" TargetName="pausePath" Value="1"/>
                            <Setter Property="Opacity" TargetName="playPath" Value="0"/>
                        </Trigger>
                        <EventTrigger RoutedEvent="Mouse.MouseLeave">
                            <BeginStoryboard x:Name="OnMouseLeave1_BeginStoryboard" Storyboard="{StaticResource OnMouseLeave1}"/>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="Mouse.MouseEnter">
                            <BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="MapSlider" TargetType="{x:Type Slider}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="#FFC4C4C4"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Slider}">
                    <Border SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*" MinHeight="{TemplateBinding MinHeight}"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <TickBar x:Name="TopTick" Height="4" Visibility="Collapsed" Grid.Row="0" Fill="{TemplateBinding Foreground}" Placement="Top"/>
                            <TickBar x:Name="BottomTick" Height="4" Visibility="Collapsed" Grid.Row="2" Fill="{TemplateBinding Foreground}" Placement="Bottom"/>
                            <Border x:Name="TrackBackground" Margin="-1,0,-1,0" VerticalAlignment="Stretch" Height="Auto" BorderBrush="{DynamicResource HuluBorder}" CornerRadius="0" Grid.Row="1" BorderThickness="0.5" Background="{DynamicResource HuluBack}">

                                <Rectangle x:Name="PART_SelectionRange"  Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Stroke="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" StrokeThickness="1.0" Height="Auto" Visibility="Hidden"/>

                            </Border>
                            <Track x:Name="PART_Track" Grid.Row="1">
                                <Track.DecreaseRepeatButton>
                                    <RepeatButton Style="{StaticResource SliderRepeatButtonStyle}" Command="{x:Static Slider.DecreaseLarge}"/>
                                </Track.DecreaseRepeatButton>
                                <Track.IncreaseRepeatButton>
                                    <RepeatButton Style="{StaticResource SliderRepeatButtonStyle}" Command="{x:Static Slider.IncreaseLarge}" Opacity="0"/>
                                </Track.IncreaseRepeatButton>
                                <Track.Thumb>
                                    <!--<Thumb x:Name="Thumb" Opacity="0" Width="2" Height="Auto"/>-->
                                    <Thumb x:Name="Thumb" Opacity="10" Width="22" Height="20" Background="LightGray"
                                           BorderBrush="Gray" BorderThickness="1"/>
                                </Track.Thumb>
                            </Track>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="TickPlacement" Value="TopLeft">
                            <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
                            <Setter Property="Style" TargetName="Thumb" Value="{StaticResource HorizontalSliderUpThumbStyle}"/>
                            <Setter Property="Margin" TargetName="TrackBackground" Value="5,2,5,0"/>
                        </Trigger>
                        <Trigger Property="TickPlacement" Value="BottomRight">
                            <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
                            <Setter Property="Style" TargetName="Thumb" Value="{StaticResource HorizontalSliderDownThumbStyle}"/>
                            <Setter Property="Margin" TargetName="TrackBackground" Value="5,0,5,2"/>
                        </Trigger>
                        <Trigger Property="TickPlacement" Value="Both">
                            <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsSelectionRangeEnabled" Value="true">
                            <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter Property="Foreground" TargetName="Thumb" Value="Blue"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="IsMoveToPointEnabled" Value="True"/>
        <Setter Property="IsSnapToTickEnabled" Value="False"/>
    </Style>
    <!-- Resource dictionary entries should be defined here. -->

    <Style x:Key="DarkGrayButton" TargetType="{x:Type Button}">
        <Setter Property="FontFamily" Value="Calibri"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Name="border" Width="{TemplateBinding ActualWidth}" 
                            Height="{TemplateBinding ActualHeight}" BorderThickness="0"
                            Background="Transparent">
                        <Border.BitmapEffect>
                                <OuterGlowBitmapEffect GlowColor="White" GlowSize="0"></OuterGlowBitmapEffect>
                        </Border.BitmapEffect>

                        <ContentPresenter Content="{TemplateBinding Content}" />

                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" 
                                    Property="Control.BitmapEffect">
                                <Setter.Value>
                                    <OuterGlowBitmapEffect GlowColor="White" GlowSize="3"></OuterGlowBitmapEffect>
                                </Setter.Value>
                            </Setter>

                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="border" Property="Margin" Value="1"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>

            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="FullscreenImage" TargetType="{x:Type Image}">
        <Setter Property="Source" Value="..\Images\FitAll.png" />
    </Style>

    <Style x:Key="ActualImage" TargetType="{x:Type Image}">
        <Setter Property="Source" Value="..\Images\Actual.png" />
    </Style>

    <Style x:Key="ZoomInImage" TargetType="{x:Type Image}">
        <Setter Property="Source" Value="..\Images\zoomin.png" />
    </Style>

    <Style x:Key="ZoomOutImage" TargetType="{x:Type Image}">
        <Setter Property="Source" Value="..\Images\zoomout.png" />
    </Style>

    <Style x:Key="globalMapImage" TargetType="{x:Type Image}">
        <Setter Property="Source" Value="..\Images\globalMap.png" />
    </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
Renat Khabibulin
Software Developer (Senior) Luxoft
Russian Federation Russian Federation
My developers career starts in 1995, when my father bought my first PC and gave my book "QBasic".
Than it was Pascal, Delphi, C++ Builder...But when I began to work with .Net in 2008, I understand, that this technology is exactly what I need Smile | :)

For now, I am a Senior .Net developer at Luxoft.

P.S. Right now I am extremly looking for a legal job offer from USA.

Comments and Discussions

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 25 Apr 2011

Article Copyright 2011 by Renat Khabibulin
Everything else Copyright © CodeProject, 1999-2024

Web04 2.8:2024-04-02:1