使用圖像自動文本修剪或僅文本進行本地化來樣式化WPF按鈕內容

Question

我的c＃WPF 3.5 .NET應用程序中有以下Button

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

我的按鈕樣式模板在ResourceDirectory App.xaml中應用如下

<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>

現在，我正在項目中進行本地化，因此當更改語言（如法語）時，Button文本將變大，而不是按鈕寬度，因此我想以按鈕樣式自動進行文本修剪。 並在工具提示中顯示全文。

我也有圖像和文本如下第二種按鈕。

<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>

我也想通過此按鈕應用相同的樣式。

那么有可能在同一樣式模板中執行此操作嗎？

請幫我解決這個問題。 提前致謝。

Answer 1

為此，您需要將樣式中的ContentPresenter更改為Textblock，並將其Text綁定到Content。

如果用這些內容代替，您應該可以根據需要設置文本修剪。

<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>

編輯：關於您的問題的第二部分。 您顯示的最后一段代碼無法正常工作，因為您要兩次設置Button的內容（我認為它實際上並不能編譯）。

做你想達到什么樣的最徹底的方法是定義一個自定義的控件類，如所描述這里 。

一種“不太干凈”的技巧可能是使用Button的Tag字段來存儲圖像源URI，如下所示：

<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" />

然后以您的樣式檢索它。 此網格替換了先前解決方案中的Textblock：

<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>

此處說明綁定稍有不同的原因。

但是同樣，創建帶有圖像和文本的自定義按鈕可能是最干凈的方法！