自动尺寸按钮样式

Question

我有Style：

<!--Normal Button Style -->
<Style TargetType="{x:Type Button}" x:Key="NormalButtonStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ButtonBase}">
                <Grid Background="{TemplateBinding Background}" SnapsToDevicePixels="True" Effect="{DynamicResource ShadowEffect}" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="16"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>

                    <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Tag}" HorizontalAlignment="Left" Width="16" Stretch="None"  Margin="0,1" />
                    <!--<TextBlock Grid.Column="1" Text="{TemplateBinding Content}" Width="Auto" Margin="0,1" Padding="0" TextWrapping="Wrap" VerticalAlignment="Center" />-->         
                    <ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" 
                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这是Button：

<Button Content="Record" HorizontalAlignment="Left" 
    VerticalAlignment="Top" Width="63" Style="{StaticResource NormalButtonStyle}" 
    Tag="Blabla.png" Height="24"/>

这给了我这个：

问题

出于本地化原因，如何根据内部文本制作具有自动尺寸的按钮？

Answer 1

简单：不要为按钮指定固定宽度（您已将其设置为63）并确保其HorizontalAlignment未设置为Stretch（因此{{1}很好）。

您可能还想添加一些填充以为文本提供更多的喘息空间。

Answer 2

您的代码也在运行。您必须从buttton中删除“Width = 63”。

另一种方法  在这里，我使用stackpanel作为基于内容的堆栈面板大小，并忽略可用空间，如果有额外的空间，可以使用TextWrapping。

 <Window.Resources>
    <Style TargetType="{x:Type Button}" x:Key="NormalButtonStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ButtonBase}">
                    <StackPanel MinHeight="{TemplateBinding MinHeight}" Orientation="Horizontal" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" Effect="{DynamicResource ShadowEffect}" >
                        <Image VerticalAlignment="Center" HorizontalAlignment="Center" Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Tag}" Margin="2,0,2,0"  Width="16" Height="16" Stretch="None"/>
                        <TextBlock MaxWidth="{Binding Path=ActualWidth,RelativeSource={RelativeSource TemplatedParent}}"  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Text="{TemplateBinding Content}" TextWrapping="Wrap" />
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid ShowGridLines="True" Width="500">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="100"/>            
    </Grid.RowDefinitions>
    <Button Content="R" HorizontalAlignment="Left" MinHeight="30" Padding="2,0,5,0"  Style="{StaticResource NormalButtonStyle}" Tag="btn1.jpg"/>
    <Button Content="Record" HorizontalAlignment="Left" Grid.Row="1" MinHeight="30" Padding="2,0,5,0"  Style="{StaticResource NormalButtonStyle}" Tag="btn1.jpg"/>
    <Button Content="Record here" HorizontalAlignment="Left" Grid.Row="2" MinHeight="30" Padding="2,0,5,0"  Style="{StaticResource NormalButtonStyle}" Tag="btn1.jpg"/>
    <Button Content="Record record record record Record record record record Record record record record Record record record record Record record record record Record record record record" Grid.Row="3" MinHeight="30" Padding="2,0,5,0"  Style="{StaticResource NormalButtonStyle}" Tag="btn1.jpg"/>
    <Button Content="Record record record record Record record record record Record record record record Record record record record Record record record record Record record record record" Grid.Row="4" MinHeight="30" Padding="2,0,5,0"  Style="{StaticResource NormalButtonStyle}" Tag="btn1.jpg"/>
</Grid>

注意：

1. 在样式中使用MinHeight / MinWidth / MaxHeight / MaxWidth属性 designing.it有助于本地化。

2. 使用自动调整大小网格进行设计。

<强>结果