使用自动Texttrimming with Image或仅用于本地化的文本来设置WPF按钮内容的样式

时间:2015-04-05 06:09:49

标签: c# wpf silverlight

我在c#WPF 3.5 .NET应用程序中使用了按钮

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

enter image description here

我的按钮样式模板在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>

enter image description here

我也想用这个按钮应用相同的风格。

那么可以在相同的样式模板中执行此操作吗?

请帮我解决这个问题。 在此先感谢。

1 个答案:

答案 0 :(得分:0)

为此,您需要将样式中的ContentPresenter更改为Textblock,并将其Text绑定到您的内容。

如果你用这些东西替换某些东西,你应该可以根据需要设置文本修剪。

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

编辑:关于你问题的第二部分。 您显示的最后一段代码无法正常工作,因为您将按钮的内容设置了两次(我认为它实际上并未编译)。

执行您尝试实现的目标的最简洁方法是定义自定义Control类,如here所述。

A&#34;不太干净&#34; hack可能是使用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" />

然后以你的风格检索它。此Grid替换了先前解决方案中的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>

here解释了绑定略有不同的原因。

但是,再次创建一个包含图像和文本的自定义按钮可能是最干净的方法!

相关问题