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

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内的文本不适合按钮集可见性崩溃以使按钮大小更小以及何时适合将它设置为Visible以将大小返回到初始值？我试图将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;
    }