如何更改按钮样式取决于宽度

Question

我有简单的用户控件，里面的控件很少，布局如下：

<Grid>
    <DockPanel>
        <Grid
            DockPanel.Dock="Left"
         Margin="25 0 0 2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="3*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image
            Grid.Column="0"
            Source="image.png"
            VerticalAlignment="Center"
            HorizontalAlignment="Left"
            Width="24"
            Height="24" />
            <Label
            Grid.Column="1"
            HorizontalAlignment="Left"
            Margin="5 0 0 0"
            VerticalAlignment="Center">
                <TextBlock
                TextTrimming="CharacterEllipsis"
                Text="Some text"/>
            </Label>
            <Button
                Grid.Column="2"
                x:Name="SendButton"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Margin="5 0 0 0">
                <StackPanel Orientation="Horizontal">
                    <Image 
                        Width="16" 
                        Height="16" 
                        Margin="2 0"
                        Source="buttonImg1.png"/>
                    <TextBlock 
                        TextTrimming="CharacterEllipsis"
                        Text="Button text1"/>
                </StackPanel>
            </Button>
            <Button
                Grid.Column="3"
                Name="button2"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Margin="5 0 0 0">                   
                <TextBlock
                    TextTrimming="CharacterEllipsis"
                    Text="buttonText2"/>
            </Button>
        </Grid>
        <CheckBox 
            DockPanel.Dock="Right"
              HorizontalAlignment="Right"
              Margin="0,0,16,0" 
              Grid.RowSpan="2" 
              VerticalAlignment="Center">
            <TextBlock
                TextTrimming="CharacterEllipsis"
                Text="checkbox text"/>
        </CheckBox>
    </DockPanel>
</Grid>

所以我的问题是，当用户控件调整大小时，如何更改按钮内 TextBlock 的可见性，因此如果 TextBlock 内的文本不适合按钮内部，则设置可见性以折叠以使按钮大小更小，然后适合将其设置为可见以将大小返回到初始值？我试图将 TextBlock 可见性绑定到按钮 ActualWidth，但是当可见性设置为折叠后，按钮的 ActualWidth 在调整大小期间永远不会变大。

Answer 1

为您的 Grid.Column="2" 试试这个

 <Button Name="SendButton" HorizontalAlignment="Center" VerticalAlignment="Center"
                Grid.Column="2">
                    <Button.Style>
                        <Style TargetType="Button">
                            <Setter Property="MinHeight" Value="30"/>
                            <Setter Property="MinWidth" Value="100"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type Button}">
                                        <Grid>
                                            <Image 
                                                Width="16" 
                                                Height="16" 
                                                Margin="2 0"
                                                Source="buttonImg1.png">
                                                <Image.Style>
                                                    <Style TargetType="Image">
                                                        <Setter Property="HorizontalAlignment" Value="Left"/>
                                                        <Style.Triggers>
                                                            <DataTrigger Binding="{Binding Visibility, ElementName=tb1}" Value="Collapsed">
                                                                <Setter Property="HorizontalAlignment" Value="Center"/>
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </Image.Style>
                                            </Image>
                                            <TextBlock Name="tb1" VerticalAlignment="Center" HorizontalAlignment="Center" 
                                                TextTrimming="CharacterEllipsis" 
                                                Text="Button text1"/>
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Button.Style>
                </Button>

Answer 2

找到解决办法：

<Grid x:Name="Grid" Grid.Column="2">
        <Button
            HorizontalAlignment="Center">
            <Grid>
                <Image x:Name="Image" HorizontalAlignment="Left" Width="16" Height="16" Source="image.png"></Image>
                <TextBlock
                    Padding="20 0 0 0"
                    Text="send request">
                    <TextBlock.Visibility>
                        <MultiBinding Converter="{StaticResource Converter}">
                            <Binding Path="ActualWidth" ElementName="Grid"/>
                            <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
                            <Binding Path="ActualWidth" ElementName="Image"/>
                        </MultiBinding>
                    </TextBlock.Visibility>
                </TextBlock>
            </Grid>
        </Button>
    </Grid>

转换器代码：

public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        double gridWidth = double.Parse(values[0].ToString());
        double textBlockWidth = double.Parse(values[1].ToString());
        double imageWidth = double.Parse(values[2].ToString());

        return  gridWidth - textBlockWidth - imageWidth >= 0 
            ? Visibility.Visible
            : Visibility.Collapsed;
    }