Cfrtjryk

This is a button that changes text and icon according to a Boolean state. for example, a play / pause button or a connect / disconnect button. The icon uses Segoe MDL2 Assets as the default font, but you can edit the template to change to another!

The code:

public class StateImageButton : Button

{

    static StateImageButton()

    {

        DefaultStyleKeyProperty.OverrideMetadata(typeof(StateImageButton), new FrameworkPropertyMetadata(typeof(StateImageButton)));

    }



    public bool State

    {

        get { return (bool)GetValue(StateProperty); }

        set { SetValue(StateProperty, value); }

    }



    public Orientation Orientation

    {

        get { return (Orientation)GetValue(OrientationProperty); }

        set { SetValue(OrientationProperty, value); }

    }



    public String TextOn

    {

        get { return (String)GetValue(TextOnProperty); }

        set { SetValue(TextOnProperty, value); }

    }



    public String IconOn

    {

        get { return (String)GetValue(IconOnProperty); }

        set { SetValue(IconOnProperty, value); }

    }



    public String TextOff

    {

        get { return (String)GetValue(TextOffProperty); }

        set { SetValue(TextOffProperty, value); }

    }



    public String IconOff

    {

        get { return (String)GetValue(IconOffProperty); }

        set { SetValue(IconOffProperty, value); }

    }



    public static readonly DependencyProperty StateProperty =

        DependencyProperty.Register("State",

            typeof(bool),

            typeof(StateImageButton),

            new PropertyMetadata(false));



    public static readonly DependencyProperty OrientationProperty =

        DependencyProperty.Register("Orientation",

            typeof(Orientation),

            typeof(StateImageButton),

            new PropertyMetadata(Orientation.Vertical));



    public static readonly DependencyProperty TextOnProperty =

        DependencyProperty.Register("TextOn",

        typeof(string),

        typeof(StateImageButton),

        new PropertyMetadata(""));



    public static readonly DependencyProperty IconOnProperty =

        DependencyProperty.Register("IconOn",

        typeof(string),

        typeof(StateImageButton),

        new PropertyMetadata(""));



    public static readonly DependencyProperty TextOffProperty =

        DependencyProperty.Register("TextOff",

            typeof(string),

            typeof(StateImageButton),

            new PropertyMetadata(""));



    public static readonly DependencyProperty IconOffProperty =

        DependencyProperty.Register("IconOff",

            typeof(string),

            typeof(StateImageButton),

            new PropertyMetadata(""));

}

The style (note that it is based on the ToolBar button style, as I prefer this, but you can change it to a normal button style too)

<Style TargetType="{x:Type local:StateImageButton}" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">

    <Setter Property="MinWidth" Value="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}"/>

    <Setter Property="Padding" Value="0"/>

    <Setter Property="ContentTemplate">

        <Setter.Value>

            <DataTemplate>

                <StackPanel Margin="5"

                            Orientation="{Binding Orientation, RelativeSource={RelativeSource AncestorType=Button}}">

                    <TextBlock Name="Icon"  

                               FontFamily="Segoe MDL2 Assets"

                               HorizontalAlignment="Center"

                               FontSize="18"

                               Text="{Binding Icon, RelativeSource={RelativeSource AncestorType=Button}}" />

                    <TextBlock Name="Text" 

                               Text="{Binding Text, RelativeSource={RelativeSource AncestorType=Button}}"

                               HorizontalAlignment="Center"

                               Margin="0,5,0,0" />

                </StackPanel>

                <DataTemplate.Triggers>

                    <DataTrigger Binding="{Binding State, RelativeSource={RelativeSource AncestorType=Button}}"  Value="True">

                        <Setter TargetName="Text" Property="Text" Value="{Binding TextOn, RelativeSource={RelativeSource AncestorType=Button}}"/>

                    </DataTrigger>

                    <DataTrigger Binding="{Binding State, RelativeSource={RelativeSource AncestorType=Button}}" Value="False">

                        <Setter TargetName="Text" Property="Text" Value="{Binding TextOff, RelativeSource={RelativeSource AncestorType=Button}}"/>

                    </DataTrigger>

                    <DataTrigger Binding="{Binding State, RelativeSource={RelativeSource AncestorType=Button}}"  Value="True">

                        <Setter TargetName="Icon"  Property="Text" Value="{Binding IconOn, RelativeSource={RelativeSource AncestorType=Button}}"/>

                    </DataTrigger>

                    <DataTrigger Binding="{Binding State, RelativeSource={RelativeSource AncestorType=Button}}" Value="False">

                        <Setter TargetName="Icon"  Property="Text" Value="{Binding IconOff, RelativeSource={RelativeSource AncestorType=Button}}"/>

                    </DataTrigger>

                </DataTemplate.Triggers>

            </DataTemplate>

        </Setter.Value>

    </Setter>

</Style>

and an example of use

<local:StateImageButton State="{Binding TheBooleanState}"

                                     TextOff="Start"

                                     TextOn="Stop"

                                     IconOff=""

                                     IconOn=""

                                     Command="{Binding TheCommand}"/>