wpf 自动调整大小按钮样式

Auto size Button Style

提问by Nicke Manarin

I have this Style:

我有这个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>

And this Button:

而这个Button：

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

That gives me this:

这给了我这个：

The Question

问题

For localization reasons, How to make the button with automatic size depending on the inner text?

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

回答by Pieter Witvoet

Simple: don't give the button a fixed width (you've set it to 63) and make sure its HorizontalAlignmentis not set to Stretch(so Leftis fine).

简单：不要给按钮一个固定的宽度（你已经将它设置为63）并确保它HorizontalAlignment没有设置为Stretch（所以Left很好）。

You may also want to add some padding to give the text more breathing space.

您可能还想添加一些填充来为文本提供更多的呼吸空间。

回答by Heena Patil

Your code is also working.You have to remove "Width=63" from buttton only.

您的代码也可以正常工作。您必须仅从按钮中删除“Width=63”。

Another approachHere I am using stackpanel as stack panel size based on the contents and ignores how much space is available and used TextWrapping here if there is extra space available.

另一种方法这里我使用 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>

Note:

注意：

1. Use MinHeight / MinWidth / MaxHeight / MaxWidth properties in style designing.it helps in localization.

2. Use Auto sizing grid for Designing.

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

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

Result

结果