Click here to Skip to main content
15,897,718 members
Articles / Desktop Programming / WPF

Reusing Control Templates in Resource Dictionaries

Rate me:
Please Sign up or sign in to vote.
4.98/5 (24 votes)
8 Apr 2010CPOL8 min read 86.3K   3K   33  
Defining control templates in a ResourceDictionary for clean and easy reuse
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ResourceDictionary.MergedDictionaries>
        <!-- Resource Dictionary containing brushes used for the Mac Window titlebar buttons-->
        <ResourceDictionary Source="MacStyledButtonBrushes.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <!-- Close Button -->
    <Style x:Key="CloseRadialButton" TargetType="Button">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="MinHeight" Value="13" />
        <Setter Property="MinWidth" Value="13" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Ellipse Stroke="{x:Null}" Fill="{StaticResource CloseButtonOnStateColor}" HorizontalAlignment="Center" 
                                 VerticalAlignment="Center" Width="13" Height="13" x:Name="Ellipse" />
                        <TextBlock x:Name="closeTextBlock" Margin="4,0,0,1" RenderTransformOrigin="0.5,0.5" Text="+" 
                                   HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0" FontWeight="Bold" 
                                   FontSize="10" Foreground="#FF242424">
                            <TextBlock.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="2" ScaleY="2" />
                                    <RotateTransform Angle="45" />
                                </TransformGroup>
                            </TextBlock.RenderTransform>
                        </TextBlock>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Ellipse" Property="Fill" Value="{StaticResource CloseButtonOnStateColor}" />
                            <Setter TargetName="closeTextBlock" Property="Opacity" Value="0.8" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="Ellipse" Property="Fill" Value="{StaticResource CloseButtonPressedStateColor}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <!-- Minimize Button -->
    <Style x:Key="MinimizeRadialButton" TargetType="Button">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="MinHeight" Value="13" />
        <Setter Property="MinWidth" Value="13" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Ellipse Stroke="{x:Null}" Fill="{StaticResource MinimizeButtonOnStateColor}" HorizontalAlignment="Center" 
                                 VerticalAlignment="Center" Width="13" Height="13" x:Name="Ellipse" />
                        <TextBlock x:Name="minimizeTextBlock" RenderTransformOrigin="0.5,0.5" Text="-" HorizontalAlignment="Center"
                                VerticalAlignment="Center" Opacity="0" Margin="0,-2,0,0" FontWeight="Bold" FontSize="10"
                                Foreground="#FF242424">
                            <TextBlock.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="3" ScaleY="1.5" />
                                </TransformGroup>
                            </TextBlock.RenderTransform>
                        </TextBlock>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Ellipse" Property="Fill" Value="{StaticResource MinimizeButtonOnStateColor}" />
                            <Setter TargetName="minimizeTextBlock" Property="Opacity" Value="0.8" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="Ellipse" Property="Fill" Value="{StaticResource MinimizeButtonPressedStateColor}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <!-- Maximize Button -->
    <Style x:Key="MaximizeRadialButton" TargetType="Button">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="MinHeight" Value="13" />
        <Setter Property="MinWidth" Value="13" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Ellipse Stroke="{x:Null}" Fill="{StaticResource MaximizeButtonOnStateColor}" HorizontalAlignment="Center" 
                                 VerticalAlignment="Center" Width="13" Height="13" x:Name="Ellipse" />
                        <TextBlock x:Name="closeTextBlock" RenderTransformOrigin="0.5,0.5" Text="+" HorizontalAlignment="Center"
                                VerticalAlignment="Center" Margin="0,-2,0,0" Opacity="0" FontWeight="Bold" FontSize="10"
                                Foreground="#FF242424">
                             <TextBlock.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="2" ScaleY="2" />
                                </TransformGroup>
                            </TextBlock.RenderTransform>
                        </TextBlock>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Ellipse" Property="Fill" Value="{StaticResource MaximizeButtonOnStateColor}" />
                            <Setter TargetName="closeTextBlock" Property="Opacity" Value="0.8" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="Ellipse" Property="Fill" Value="{StaticResource MaximizeButtonPressedStateColor}" />
                        </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
South Africa South Africa
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions