This project is read-only.

Styles & templates

Jan 7, 2012 at 10:21 PM

Hello,

First, thanks for this amazing library, it's just fabulous!

Is it possible to apply a style or template to your control?

I try to apply a style to a PivotHeaderControl in order to avoir the repetition of all style (FontFamily, FontWeight, ActiveForegrounf, InactiveForeground, etc.) but apparently it's not supported.

And is it possible to override the template of the close / minimize / maximize / about buttons ?

Thanks.

Jan 12, 2012 at 6:41 AM
Edited Jan 12, 2012 at 6:49 AM

Hi laedit,

 It is possible to apply a style or template to most of the controls of WPSpark. Here is an example of how to style the PivotHeaderControl:

 

<Window x:Class="TestWPFSpark.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:wpfspark="clr-namespace:WPFSpark;assembly=WPFSpark"
        Title="MainWindow"
        Height="350"
        Width="525">
    <Window.Resources>
        <Style x:Key="PivotHeaderStyle"
               TargetType="wpfspark:PivotHeaderControl">
            <Setter Property="FontFamily"
                    Value="Courier New"></Setter>
            <Setter Property="FontFamily"
                    Value="Courier New"></Setter>
            <Setter Property="FontSize"
                    Value="32"></Setter>
            <Setter Property="ActiveForeground"
                    Value="LawnGreen"></Setter>
            <Setter Property="InactiveForeground"
                    Value="#444444"></Setter>
            <Setter Property="Margin"
                    Value="20,10"></Setter>
        </Style>
    </Window.Resources>
    <Grid Background="Black">
        <wpfspark:PivotPanel x:Name="RootPivotPanel"
                             HeaderHeight="70"
                             HorizontalAlignment="Stretch"
                             HeaderBackground="Black">
            <wpfspark:PivotItem>
                <wpfspark:PivotItem.PivotHeader>
                    <wpfspark:PivotHeaderControl Style="{StaticResource PivotHeaderStyle}">Item One</wpfspark:PivotHeaderControl>
                </wpfspark:PivotItem.PivotHeader>
                <wpfspark:PivotItem.PivotContent>
                    <wpfspark:PivotContentControl>
                        <Border Background="LightBlue"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch">
                            <TextBlock FontFamily="Segoe WP"
                                       FontWeight="Light"
                                       FontSize="48"
                                       Foreground="White"
                                       Text="Item One Content"></TextBlock>
                        </Border>
                    </wpfspark:PivotContentControl>
                </wpfspark:PivotItem.PivotContent>
            </wpfspark:PivotItem>
            <wpfspark:PivotItem>
                <wpfspark:PivotItem.PivotHeader>
                    <wpfspark:PivotHeaderControl Style="{StaticResource PivotHeaderStyle}">Item Two</wpfspark:PivotHeaderControl>
                </wpfspark:PivotItem.PivotHeader>
                <wpfspark:PivotItem.PivotContent>
                    <wpfspark:PivotContentControl>
                        <Border Background="LightGoldenrodYellow"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch">
                            <TextBlock FontFamily="Segoe WP"
                                       FontWeight="Light"
                                       FontSize="48"
                                       Foreground="Black"
                                       Text="Item Two Content"></TextBlock>
                        </Border>
                    </wpfspark:PivotContentControl>
                </wpfspark:PivotItem.PivotContent>
            </wpfspark:PivotItem>
            <wpfspark:PivotItem>
                <wpfspark:PivotItem.PivotHeader>
                    <wpfspark:PivotHeaderControl Style="{StaticResource PivotHeaderStyle}">Item Three</wpfspark:PivotHeaderControl>
                </wpfspark:PivotItem.PivotHeader>
                <wpfspark:PivotItem.PivotContent>
                    <wpfspark:PivotContentControl>
                        <Border Background="LightSeaGreen"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch">
                            <TextBlock FontFamily="Segoe WP"
                                       FontWeight="Light"
                                       FontSize="48"
                                       Foreground="Black"
                                       Text="Item Three Content"></TextBlock>
                        </Border>
                    </wpfspark:PivotContentControl>
                </wpfspark:PivotItem.PivotContent>
            </wpfspark:PivotItem>
        </wpfspark:PivotPanel>
    </Grid>
</Window>

Regards,
Ratish Philip

Jan 12, 2012 at 6:50 AM

Hi laedit.

    It is also possible to override the template of close / minimize / maximize / about buttons in SparkWindow. But in order to display the buttons with the new template, you must also override the template for SparkWindow. When you override the template of SparkWindow, you must ensure that the buttons have the same name as defined in the original template of SparkWindow (i.e. PART_About, PART_Minimize, PART_Maximize, PART_Close), otherwise SparkWindow will not be able to link the Click event of these buttons to their respective functionalities. Here is an example, where I have overridden the button templates to display glyphs from the fonts Wingdings and Wingdings 2 as their content:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:wpfspark="clr-namespace:WPFSpark;assembly=WPFSpark">

    <Style x:Key="CustomMinimizeButtonStyle" TargetType="{x:Type Button}"> 
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Viewbox HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Canvas Height="16" Width="16">
                            <Rectangle x:Name="BorderRect" Width="15" Height="15" Stroke="Transparent" Fill="Transparent"
 StrokeThickness="0.5"></Rectangle>
                            <TextBlock x:Name="MinText" FontFamily="Wingdings" Foreground="White" FontSize="14" Text="&#xEA;" HorizontalAlignment="Center"                                        VerticalAlignment="Center"></TextBlock>
                        </Canvas>
                    </Viewbox>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Button.IsMouseOver"
                                 Value="true">
                            <Setter TargetName="BorderRect"
                                    Property="Stroke"
                                    Value="Gray"></Setter>
                            <Setter TargetName="BorderRect"
                                    Property="Fill">
                                <Setter.Value>
                                    <LinearGradientBrush StartPoint="0,0"
                                                         EndPoint="0,1">
                                        <GradientStop Color="#99FFFFFF"
                                                      Offset="0"></GradientStop>
                                        <GradientStop Color="Black"
                                                      Offset="0.7"></GradientStop>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter TargetName="MinText"
                                    Property="Foreground"
                                    Value="LawnGreen"></Setter>
                            <Setter TargetName="BorderRect"
                                    Property="BitmapEffect">
                                <Setter.Value>
                                    <OuterGlowBitmapEffect GlowColor="LawnGreen"
                                                           GlowSize="5"></OuterGlowBitmapEffect>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="Button.IsPressed"
                                 Value="true">
                            <Setter TargetName="MinText"
                                    Property="Foreground"
                                    Value="LawnGreen"></Setter>
                            <Setter TargetName="BorderRect"
                                    Property="Fill">
                                <Setter.Value>
                                    <LinearGradientBrush StartPoint="0,0"
                                                         EndPoint="0,1">
                                        <GradientStop Color="#99333333"
                                                      Offset="0"></GradientStop>
                                        <GradientStop Color="#99FFFFFF"
                                                      Offset="0.7"></GradientStop>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <Style x:Key="CustomMaximizeButtonStyle"
           TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Viewbox HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch">
                        <Canvas Height="16"
                                Width="16">
                            <Rectangle x:Name="BorderRect"
                                       Width="15"
                                       Height="15"
                                       Stroke="Transparent"
                                       Fill="Transparent"
                                       StrokeThickness="0.5"></Rectangle>
                            <TextBlock x:Name="MinText"
                                       FontFamily="Wingdings"
                                       Foreground="White"
                                       FontSize="14"
                                       Text="&#xE9;"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"></TextBlock>
                        </Canvas>
                    </Viewbox>
                    <ControlTemplate.Triggers>
                        ...
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <Style x:Key="CustomCloseButtonStyle"
           TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Viewbox HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch">
                        <Canvas Height="16"
                                Width="16">
                            <Rectangle x:Name="BorderRect"
                                       Width="15"
                                       Height="15"
                                       Stroke="Transparent"
                                       Fill="Transparent"
                                       StrokeThickness="0.5"></Rectangle>
                            <TextBlock x:Name="MinText"
                                       FontFamily="Wingdings 2"
                                       Foreground="White"
                                       FontSize="14"
                                       Text="&#xD1;"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"></TextBlock>
                        </Canvas>
                    </Viewbox>
                    <ControlTemplate.Triggers>
                        ...
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="CustomAboutButtonStyle"
           TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Viewbox HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch">
                        <Canvas Height="16"
                                Width="16">
                            <Rectangle x:Name="BorderRect"
                                       Width="15"
                                       Height="15"
                                       Stroke="Transparent"
                                       Fill="Transparent"
                                       StrokeThickness="0.5"></Rectangle>
                            <TextBlock x:Name="MinText"
                                       FontFamily="Wingdings"
                                       Foreground="White"
                                       FontSize="14"
                                       Text="&#xB5;"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"></TextBlock>
                        </Canvas>
                    </Viewbox>
                    <ControlTemplate.Triggers>
                        ...
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="CustomSparkWindowStyle" TargetType="{x:Type wpfspark:SparkWindow}">
        <Setter Property="AllowsTransparency"
                Value="False"></Setter>
        <Setter Property="ResizeMode"
                Value="NoResize"></Setter>
        <Setter Property="MinHeight"
                Value="100"></Setter>
        <Setter Property="MinWidth"
                Value="200"></Setter>
        <Setter Property="MaxWidth"
                Value="{DynamicResource {x:Static SystemParameters.MaximizedPrimaryScreenWidthKey}}"></Setter>
        <Setter Property="MaxHeight"
                Value="{DynamicResource {x:Static SystemParameters.MaximizedPrimaryScreenHeightKey}}"></Setter>
        <Setter Property="WindowStyle"
                Value="None"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type wpfspark:SparkWindow}">
                    <Border Name="OuterFrame"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            BorderBrush="{Binding Path=OuterBorderBrush, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type wpfspark:SparkWindow}}}"
                            BorderThickness="{Binding Path=OuterBorderThickness, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type wpfspark:SparkWindow}}}"
                            CornerRadius="{Binding Path=OuterBorderCornerRadius, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type wpfspark:SparkWindow}}}"
                            SnapsToDevicePixels="True"
                            Background="Transparent">
                        <Border Name="windowFrame"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                BorderBrush="{Binding Path=InnerBorderBrush, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type wpfspark:SparkWindow}}}"
                                BorderThickness="{Binding Path=InnerBorderThickness, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type wpfspark:SparkWindow}}}"
                                CornerRadius="{Binding Path=InnerBorderCornerRadius, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type wpfspark:SparkWindow}}}"
                                SnapsToDevicePixels="True"
                                Background="{TemplateBinding Background}">
                            <Grid ShowGridLines="False">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="2"></RowDefinition>
                                    <RowDefinition Height="40"></RowDefinition>
                                    <RowDefinition Height="2"></RowDefinition>
                                    <RowDefinition Height="*"></RowDefinition>
                                </Grid.RowDefinitions>

                                <Grid Grid.Row="1"
                                      Grid.RowSpan="3"
                                      Grid.Column="1"
                                      Margin="0,0,0,0">
                                    <TextBlock  Name="PART_TitleText"
                                                FontFamily="{TemplateBinding FontFamily}"
                                                FontWeight="{TemplateBinding FontWeight}"
                                                FontSize="{TemplateBinding FontSize}"
                                                Foreground="{TemplateBinding Foreground}"
                                                FontStyle="{TemplateBinding FontStyle}"
                                                VerticalAlignment="Top"
                                                Margin="{Binding Path=TitleMargin, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type wpfspark:SparkWindow}}}"
                                                Effect="{Binding Path=TitleEffect, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type wpfspark:SparkWindow}}}"
                                                Text="{Binding Path=Title, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type wpfspark:SparkWindow}}, NotifyOnTargetUpdated=True}">
                                        <TextBlock.Triggers>
                                            <EventTrigger RoutedEvent="Binding.TargetUpdated">
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <ThicknessAnimation Duration="0:0:0.3"
                                                                            Storyboard.TargetProperty="Margin"
                                                                            From="400,-30,0,0"
                                                                            To="0,-30,0,0">
                                                            <ThicknessAnimation.EasingFunction>
                                                                <ExponentialEase EasingMode="EaseOut"
                                                                                 Exponent="2"></ExponentialEase>
                                                            </ThicknessAnimation.EasingFunction>
                                                        </ThicknessAnimation>
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger>
                                        </TextBlock.Triggers>
                                    </TextBlock>
                                </Grid>

                                <Border Name="PART_TitleBar"
                                        Grid.Row="0"
                                        Grid.Column="0"
                                        Grid.RowSpan="3"
                                        Grid.ColumnSpan="2"
                                        Background="Black"
                                        Opacity="0" />

                                <Grid  Grid.Row="1">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                        <ColumnDefinition Width="40"></ColumnDefinition>
                                        <ColumnDefinition Width="40"></ColumnDefinition>
                                        <ColumnDefinition Width="40"></ColumnDefinition>
                                        <ColumnDefinition Width="40"></ColumnDefinition>
                                        <ColumnDefinition Width="5" />
                                    </Grid.ColumnDefinitions>

                                    <Grid Grid.Row="1"
                                          Grid.RowSpan="4"
                                          Grid.Column="1"
                                          Margin="0,0,0,0">
                                    </Grid>
                                    <Button Name="PART_About"
                                            Margin="0,5,0,0"
                                            Grid.Column="1"
                                            Style="{StaticResource CustomAboutButtonStyle}">
                                    </Button>
                                    <Button Name="PART_Minimize"
                                            Margin="0,5,0,0"
                                            Grid.Column="2"
                                            Style="{StaticResource CustomMinimizeButtonStyle}">
                                    </Button>
                                    <Button Name="PART_Maximize"
                                            Margin="0,5,0,0"
                                            Grid.Column="3"
                                            Style="{StaticResource CustomMaximizeButtonStyle}">
                                    </Button>
                                    <Button Name="PART_Close"
                                            Margin="0,5,0,0"
                                            Grid.Column="4"
                                            Style="{StaticResource CustomCloseButtonStyle}"></Button>
                                </Grid>

                                <!-- Content -->
                                <AdornerDecorator Grid.Row="3"
                                                  Grid.Column="0">
                                    <ContentPresenter />
                                </AdornerDecorator>
                            </Grid>
                        </Border>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>


You can use the above style to apply it to any SparkWindow.

Regards,

Ratish Philip

Jan 12, 2012 at 6:56 AM

Thank you very much!