Auto size Button Style

拜拜、爱过 提交于 2020-01-05 06:38:46

问题


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 :

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

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!