如何在WPF中的可用宽度内将按钮放入一行

Posted 2023-04-01

【中文标题】如何在WPF中的可用宽度内将按钮放入一行

【英文标题】：How to fit buttons into a row within available width in WPF

【发布时间】：2022-01-14 03:05:41

【问题描述】：

这是我的代码。我是 Window Presentation Foundation (WPF) 的新手，我有一个一行一列的网格。我有许多按钮，按钮的数量可以随着时间的推移而增加。我想在可用宽度内调整我的按钮。有没有办法让按钮适应可用宽度？

Here is output Image

    <Window.Resources>
        <Style x:Key="btnpad" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="TemplateBinding Background" BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness"  CornerRadius="2">
                            <ContentPresenter ContentSource="Content"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
<Grid ScrollViewer.VerticalScrollBarVisibility="Visible" Height="500">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            
            
            
        <StackPanel Orientation="Horizontal" Width="380" Height="25" Grid.Row="0"  Margin="0 20 0 0" HorizontalAlignment="Stretch">
                <Button Style="StaticResource btnpad" Height="24"  Margin="5 0 0 0" Background="White" BorderBrush="#A7A5A5" BorderThickness="1">
                    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Stop Monitoring" Padding="10 2 10 2" Foreground="#A7A5A5"></TextBlock>
                </Button>
                <Button Style="StaticResource btnpad" Height="25"  Margin="3 0 0 0" Background="#CB2424" BorderBrush="#CB2424" BorderThickness="1">
                    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Not Ready" Padding="10 2 10 2" Foreground="White"></TextBlock>
                </Button>
                <Button Style="StaticResource btnpad" Height="25" Margin="3 0 0 0" Background="White" BorderBrush="#7be5bd" BorderThickness="1">
                    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Ready" Padding="10 2 10 2" Foreground="#7be5bd"></TextBlock>
                </Button>
                <Button Style="StaticResource btnpad" Height="25"  Margin="3 0 0 0" Background="#A7A5A5" BorderThickness="0">
                    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="SignOut" Padding="10 2 10 2" Foreground="White"></TextBlock>
                </Button>
                <Rectangle VerticalAlignment="Stretch" Width="2" Margin="3 0 0 0" Stroke="#DEDEDE" Fill="#DEDEDE"/>
                <Button Style="StaticResource btnpad" Height="24" Margin="3 0 0 0" Background="Black" BorderThickness="0">
                    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Bergeln" Padding="10 2 10 2" Foreground="White"></TextBlock>
                </Button>
                <Button Style="StaticResource btnpad" Height="24"  Margin="3 0 5 0" Background="White" BorderBrush="#A7A5A5" BorderThickness="1">
                    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Drop Participant" Padding="10 2 10 2" Foreground="#A7A5A5"></TextBlock>
                </Button>
            </StackPanel>
            <StackPanel Grid.Row="2" Margin="10 20 10 0">
                <TextBox Text="TextBox with CornerRadius" VerticalContentAlignment="Center" Padding="10 0 0 0" BorderBrush="#eae8e8">
                    <TextBox.Resources>
                        <Style TargetType="x:Type Border">
                            <Setter Property="CornerRadius" Value="5"/>
                            <Setter Property="Height" Value="35"/>

                            <Setter Property="BorderThickness" Value="1"></Setter>
                            <!--<Setter Property="HorizontalAlignment" Value="Center"></Setter>
                        <Setter Property="VerticalAlignment" Value="Center"></Setter>-->
                        </Style>
                    </TextBox.Resources>
                </TextBox>
            </StackPanel>
        </Grid>

【参考方案1】：

你可以试试这样的：

<Window.Resources>
    <Style x:Key="btnpad" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Button  Background="Transparent" BorderThickness="0">
                        <Border Background="TemplateBinding Background" BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness" CornerRadius="2">
                            <ContentPresenter ContentSource="Content"/>
                        </Border>
                
                    </Button>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Height="50">
        <ItemsControl>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <Button Style="StaticResource btnpad" Height="24"  Margin="5 0 0 0" Background="White" BorderBrush="#A7A5A5" BorderThickness="1">
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Stop Monitoring" Padding="10 2 10 2" Foreground="#A7A5A5"></TextBlock>
            </Button>
            <Button Style="StaticResource btnpad" Height="25"  Margin="3 0 0 0" Background="#CB2424" BorderBrush="#CB2424" BorderThickness="1">
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Not Ready" Padding="10 2 10 2" Foreground="White"></TextBlock>
            </Button>
            <Button Style="StaticResource btnpad" Height="25" Margin="3 0 0 0" Background="White" BorderBrush="#7be5bd" BorderThickness="1">
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Ready" Padding="10 2 10 2" Foreground="#7be5bd"></TextBlock>
            </Button>
            <Button Style="StaticResource btnpad" Height="25"  Margin="3 0 0 0" Background="#A7A5A5" BorderThickness="0">
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="SignOut" Padding="10 2 10 2" Foreground="White"></TextBlock>
            </Button>
            <Button  Style="StaticResource btnpad" Height="24" Margin="3 0 0 0" Background="Black" BorderThickness="0">
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Bergeln" Padding="10 2 10 2" Foreground="White"></TextBlock>
            </Button>
            <Button Style="StaticResource btnpad" Height="24"  Margin="3 0 5 0" Background="White" BorderBrush="#A7A5A5" BorderThickness="1">
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Drop Participant" Padding="10 2 10 2" Foreground="#A7A5A5"></TextBlock>
            </Button>
        </ItemsControl>
    </ScrollViewer>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。