How to fit buttons into a row within available width in WPF

Viewed 50

Here is my code. I am new to Window Presentation Foundation (WPF) I have a grid with one row and one column. I have a number of buttons and the number of buttons can be increased with the passage of time. I want to fit my button within the available width. Is there any way to fit the button within the available width?

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 Answers

You could try something like:

<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>
Related