Toggle button style with text and image

Question

I have a next style:

<Style x:Key="Style_MainButtons" TargetType="ToggleButton">
    <Setter Property="Width" Value="110" />
    <Setter Property="Height" Value="110" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <TextBlock x:Name="Text" HorizontalAlignment="Center" />
                    <Image x:Name="Image" Grid.Row="1" />
                </Grid>
                <ControlTemplate.Triggers>                              
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Because there are few toggle buttons using this style and each have different text and image, so how can I call “TextBlock” and “Image” from style in the next code?

<ToggleButton x:Name="btnHorizontal" 
              Style="{StaticResource Style_MainButtons}"
              Grid.Column="0" 
              Grid.Row="1" 
              Checked ="SetVersion" 
              Unchecked ="SetVersion" 
              IsChecked="True" >
</ToggleButton>

http://stackoverflow.com/a/15788069/1136211 – Clemens Jul 18 '16 at 08:25 — Clemens, Jul 18 '16 at 08:25

score 2 · Accepted Answer · answered Jul 18 '16 at 08:55

You can do something like this:

Style

<Style TargetType="ToggleButton">
                <Setter Property="Width" Value="110" />
                <Setter Property="Height" Value="110" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ToggleButton}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <TextBlock x:Name="Text" HorizontalAlignment="Center" Text="{TemplateBinding Content}"/>
                                <Image x:Name="Image" Grid.Row="1" Source="{TemplateBinding Tag}" />
                            </Grid>
                            <ControlTemplate.Triggers>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Usage

<ToggleButton Content="Text" Tag="{Binding Path=Source, Source={StaticResource Image}}"></ToggleButton>
<ToggleButton Content="Another Text" Tag="{Binding Path=Source, Source={StaticResource Image}}"></ToggleButton>

Note: Replace my Tag-Binding with an valid Binding to your actual ImageSource

Do NOT forget to set Focusable to false. – Péter Hidvégi Sep 11 '19 at 09:45 — Péter Hidvégi, Sep 11 '19 at 09:45

Toggle button style with text and image

1 Answers1