Styling a WPF Button content with auto Texttrimming with Image or only text for localization

Question

I have following Button in my c#WPF 3.5 .NET Application

<Button Height="23" x:Name="btnImportKvf" Width="75" Click="btnImportKvf_Click" IsEnabled="True" ToolTip="Click to Import" Content="Import KVF" />

enter image description here

My button style template applied in ResourceDirectory App.xaml as following

<ResourceDictionary 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna">


  <!-- Focus Visual -->

  <Style x:Key="ButtonFocusVisual">
    <Setter Property="Control.Template">
      <Setter.Value>
        <ControlTemplate>
          <Border>
            <Rectangle 
              Margin="2"
              StrokeThickness="1"
              Stroke="#60000000"
              StrokeDashArray="1 2"/>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- SimpleStyles: Button -->

  <Style TargetType="Button">
        <!--Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/-->
      <Setter Property="Foreground" Value="{StaticResource GlyphLightBrush}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="border" Background="{DynamicResource BackgroundNormal}" BorderThickness="1,1,1,2" CornerRadius="4,4,4,4" BorderBrush="{DynamicResource GlyphDarkBrush}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="0.507*"/>
                                    <RowDefinition Height="0.493*"/>
                                </Grid.RowDefinitions>
                                <Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4" Background="{StaticResource GlowBrush}"  />
                                <!--ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/-->
                                <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True" Grid.RowSpan="2"/>
                                <Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="4,4,0,0" Background="{DynamicResource ShineBrush}"/>
                            </Grid>
                        </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" TargetName="border" Value="{DynamicResource DisabledForegroundBrush}"/>
                        </Trigger>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter Property="Background" TargetName="border" Value="{DynamicResource GlowBrush}"/>
                        </Trigger>
                        <!--Trigger Property="LostFocus">
                            <Setter Property="Background" TargetName="border" Value="{DynamicResource BackgroundNormal}"/>
                        </Trigger-->
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Opacity" TargetName="shine" Value="0.4"/>
                            <Setter Property="Visibility" TargetName="glow" Value="Hidden"/>
                            <Setter Property="Background" TargetName="border" Value="{DynamicResource GlowBrush}"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="{StaticResource GlyphDarkBrush}" />
                            <Setter Property="Background" TargetName="border" Value="{DynamicResource GlowBrush}"/>
                        </Trigger>
                        <Trigger Property="IsCancel" Value="False"/>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                    <GradientStop Color="#FFEAEBF0" Offset="0.9"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Now I am doing localization in my project, so while changes language like french, then Button text would become big rather than button width, so I want auto texttrimming in button style. and full text display in tooltip.

Also i have second kind of button with Images and Text as following.

<Button Name="btnRefresh" Click="btnRefresh_Click" Width="69" ToolTipService.ToolTip="Click To Refresh" FontSize="11" Content="Refresh">
        <Image Source="../Images/Refresh.png" Width="18" Height="13" />
    </Button>

enter image description here

I also want to apply same style with this button too.

So is it possible to do this in same style template?

Please help me to solve this. Thanks in Advance.

score 0 · Answer 1 · edited May 23 '17 at 12:22

To do this, you need to change the ContentPresenter in your style to a Textblock, and bind its Text to your Content.

If you replace with something along those lines, you should be able to set text trimming as you like.

<ControlTemplate TargetType="{x:Type Button}">
    <Border x:Name="border" 
            Background="{DynamicResource BackgroundNormal}" 
            BorderThickness="1,1,1,2" 
            CornerRadius="4,4,4,4" 
            BorderBrush="{DynamicResource GlyphDarkBrush}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.507*"/>
                <RowDefinition Height="0.493*"/>
            </Grid.RowDefinitions>
            <Border Opacity="0" 
                    HorizontalAlignment="Stretch" 
                    x:Name="glow" 
                    Width="Auto" 
                    Grid.RowSpan="2" 
                    CornerRadius="4,4,4,4" 
                    Background="{StaticResource GlowBrush}"  />
            <TextBlock Text="{TemplateBinding Content}" 
                       TextTrimming="WordEllipsis" 
                       SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                       Margin="{TemplateBinding Padding}" 
                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                       Grid.RowSpan="2"/>
            <Border HorizontalAlignment="Stretch" 
                    Margin="0,0,0,0" 
                    x:Name="shine" 
                    Width="Auto" 
                    CornerRadius="4,4,0,0" 
                    Background="{DynamicResource ShineBrush}"/>
        </Grid>
    </Border>
   ...
</ControlTemplate>

EDIT: regarding the second part of your question. The last piece of code you show cannot work as you're setting the Content of your Button twice (I don't think it actually compiles).

The cleanest way of doing what you're trying to achieve is to define a custom Control class, as described here.

A "not so clean" hack could be to use the Tag field of your Button to store the image source URI like this:

<Button Name="btnRefresh" 
        Click="btnRefresh_Click" 
        Width="69" 
        ToolTipService.ToolTip="Click To Refresh" 
        FontSize="11" Content="Refresh"
        Tag="../Images/Refresh.png" Width="18" Height="13" />

And then retrieve it in your style. This Grid replaces the Textblock in the previous solution:

<Grid Grid.RowSpan="2">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Image Grid.Column="0"
           Source="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Tag}" />
    <TextBlock  Text="{TemplateBinding Content}" 
                Grid.Column="1"
                TextTrimming="WordEllipsis"
                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                Margin="{TemplateBinding Padding}" 
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>

The reason why the binding is slightly different is explained here.

But again, creating a custom Button with image and text is probably the cleanest way to do this!

Hello Nooodles, Thanks for your Answer. I have tried this while i got this solution in surfing, and found trimming solution is solved but the buttons which contains image is disappear, so it want work. — Jigs, Apr 08 '15 at 05:48
Hi, I've edited my answer to deal with the image + text case. Cheers. — Nooodles, Apr 08 '15 at 06:58
[This](http://www.hardcodet.net/2009/01/create-wpf-image-button-through-attached-properties) could be another solution as well. — Nooodles, Apr 08 '15 at 07:09

Styling a WPF Button content with auto Texttrimming with Image or only text for localization

1 Answers1