CODEWITHSUNDEEP
wpfsilverlighttemplatesxamlstyles
matthy
matthy

Reputation: 8334

Silverlight 4/ XAML: How can you make Simmilar button styles\templates without copy pasting

Ive made my own button template, which should be in 6 different color's Now i made 1 style for one of these colors. but the style is really big. What i want to do is reuse this style also for the other colors (the styles are all the same except for the colors)

now i was wondering. Is there a way to create these 6 individual styles without copy/pasting it 6 times but sort of bind these colors?

here is the XAML code for clarification:

<UserControl.Resources>
        <LinearGradientBrush x:Key="WitNormalBorder" EndPoint="1,1" StartPoint="0,0">
            <GradientStop Color="#FFFAFAFF" Offset="0.33"/>
            <GradientStop Color="#FFD4D4D7" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="WitNormalFill" EndPoint="1,1" StartPoint="0,0">
            <GradientStop Color="#FFD8D8DC" Offset="0"/>
            <GradientStop Color="White" Offset="0.66"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="WitOverBorder" EndPoint="1,1" StartPoint="0,0">
            <GradientStop Color="White" Offset="0.33"/>
            <GradientStop Color="#FFDCDCDE" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="WitOverFill" EndPoint="1,1" StartPoint="0,0">
            <GradientStop Color="#FFE6E6E9" Offset="0"/>
            <GradientStop Color="White" Offset="0.66"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="WitDownBorder" EndPoint="1,1" StartPoint="0,0">
            <GradientStop Color="#FFF0F0FF" Offset="0.33"/>
            <GradientStop Color="#FFD2D2D3" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="WitDownFill" EndPoint="1,1" StartPoint="0,0">
            <GradientStop Color="#FFDADADC" Offset="0"/>
            <GradientStop Color="#FFFAFAFD" Offset="0.66"/>
        </LinearGradientBrush>
        <Style x:Key="KleurButtonWit" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="Border" BorderThickness="0" Padding="5" CornerRadius="12" Background="{StaticResource WitNormalBorder}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Border" Storyboard.TargetProperty="(UIElement.Background)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource WitOverBorder}">
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="(UIElement.Background)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource WitOverFill}">
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(UIElement.Background)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource WitDownBorder}">
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="(UIElement.Background)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource WitDownFill}">
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                    </VisualState>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="Background" BorderThickness="0" CornerRadius="8" Background="{StaticResource WitNormalFill}">
                                <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

as you can see if i have to copy this 6 times it would be a lot of code...

Thanks, Matthy

Upvotes: 0

Views: 437

Answers (2)

Scott Munro
Scott Munro

Reputation: 13596

You can use the Style.BasedOn property to implement inheritance with styles. http://msdn.microsoft.com/en-us/library/system.windows.style.basedon.aspx This should prevent you from having to duplicate the common elements.

Upvotes: 2

Emond
Emond

Reputation: 50692

If you are going to use these six styles at the same time you will need to copy it six times. I see no way around that.

If you allow the user to select a single style and use only that style at a given point in time this question might be worth a peek also, read this question on loading resources

Upvotes: 0

Related Questions