问题
I have this 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 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?
回答1:
Your code is also working.You have to remove "Width=63" from buttton only.
Another approach Here 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.
<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 :
Use MinHeight / MinWidth / MaxHeight / MaxWidth properties in style designing.it helps in localization.
Use Auto sizing grid for Designing.
Result
回答2:
Simple: don't give the button a fixed width (you've set it to 63
) and make sure its HorizontalAlignment
is not set to Stretch
(so Left
is fine).
You may also want to add some padding to give the text more breathing space.
来源:https://stackoverflow.com/questions/27205131/auto-size-button-style