自动调整大小按钮样式(Auto size Button 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>

而这个Button ：

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

这给了我这样的：

问题

对于本地化的原因，如何使自动大小取决于内部文本按钮？

Answer 1:

你的代码也working.You必须从按钮移到只删除“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. 使用的设计自动调整大小网格。

结果

Answer 2:

简单的：不给按钮固定宽度（您已经将其设置为63 ），并确保它HorizontalAlignment未设置为Stretch （所以Left是罚款）。

您可能还需要添加一些填充给文字更多的呼吸空间。

文章来源: Auto size Button Style