CODEWITHSUNDEEP
c#.netwpf
Kian
Kian

Reputation: 1169

How to Dynamically Set Template Property Options

I would like to have a template property for my custom button template that includes different options which affect the content of an image.

I.e.

  1. Close
  2. Maximise
  3. Restore
  4. Minimise

So when the user of the control wants to set the type of button to maximise, they pick it out of a drop down in the property inspector then the source of the image control embedded within the button changes to "{DynamicResource MaximiseGlyph}".

How can I allow the user to select the template for the button which will then also choose the appropriate image control source?

Here's the current base code of my button template:

<Style x:Key="WindowControlButton" TargetType="{x:Type Button}">
    <Style.Resources>
        <BitmapImage x:Key="RestoreGlyph" CreateOptions="IgnoreImageCache" CacheOption="OnLoad" UriSource="\Restore.png"/>
        <BitmapImage x:Key="MaximiseGlyph" CreateOptions="IgnoreImageCache" CacheOption="OnLoad" UriSource="\Maximise.png"/>
        <BitmapImage x:Key="CloseGlyph" CreateOptions="IgnoreImageCache" CacheOption="OnLoad" UriSource="\Close.png"/>
        <BitmapImage x:Key="MinimiseGlyph" CreateOptions="IgnoreImageCache" CacheOption="OnLoad" UriSource="\Minimise.png"/>
    </Style.Resources>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Ellipse Fill="Black" Opacity="0.7">
                        <Ellipse.Stroke>
                            <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                                <GradientStop Color="White" Offset="0"/>
                                <GradientStop Color="#FFB8B8B8" Offset="1"/>
                            </LinearGradientBrush>
                        </Ellipse.Stroke>
                    </Ellipse>
                    <Image Source="{DynamicResource RestoreGlyph}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsFocused" Value="True"/>
                    <Trigger Property="IsDefaulted" Value="True"/>
                    <Trigger Property="IsMouseOver" Value="True"/>
                    <Trigger Property="IsPressed" Value="True"/>
                    <Trigger Property="IsEnabled" Value="False"/>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Upvotes: 1

Views: 435

Answers (1)

Pascal Pich&#233;
Pascal Pich&#233;

Reputation: 610

You need to create a Custom control inheriting a Button to store your new Property and allow your template to be bind to it.

You can follow this tutorial for creating a Custom Control

http://wpftutorial.net/HowToCreateACustomControl.html

Upvotes: 2

Related Questions