XAML - Have button size fit to grid instead of width of text-CodePudding

I am using a button style in a UserControl. Whenever I use HorizontalAlignment, HorizontalContentAlignment, or Padding the width of the button will auto submit its width to the width of the text instead of the width of the grid. I am wanting it to be aligned to the left to so using HorizontalContentAlignment="Stretch" isn't possible.

The top 85 MHz is the problem. It should stretch past the START Texbtblock like the bottom.

Relevant Code in UserControl:

     <Style x:Key="HeaderButtonStyle" TargetType="Button">
            <!--Sets default values for Nav Buttons-->
            <Setter Property="Background" Value="#212121"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="FontFamily" Value="Roboto"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <!--This removes default blue highlight when hovering over button-->
                    <ControlTemplate TargetType="Button">
                        <Grid Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
       <Style.Triggers>

..Irrelevant code..

Continued relevant code from UserControl:

    <Border Background="Transparent" BorderBrush="#707070" BorderThickness="0,0,1,0">
        <Button Style="{StaticResource HeaderButtonStyle}"
                VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                Content="{Binding Path=ButtonContent, ElementName=HeaderButtonControl}"
                />           
    </Border>

Code from Main window:

<Grid Background="#212121">
        <!--7 col 1 row -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition />
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition />
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
      
        <local:GraphHeaderButton ButtonContent="img" Grid.Row="0" FontSize="60" />

        <Grid Grid.Column="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <local:GraphHeaderButton x:Name="graphHeaderButton" ButtonContent="85.000 MHz" HorizontalContentAlignment="Left" Padding="15,0,0,0" Grid.Row="0" Grid.Column="1" FontSize="26" BorderBrush="#707070" BorderThickness="0,0,0,1" />
            <local:GraphHeaderButton x:Name="headerCenterFreq" ButtonContent="85.000 MHz                            " Grid.Row="1" Grid.Column="1" FontSize="26" />
            <TextBlock Grid.Column="1" Grid.Row="0" Text="START" FontFamily="Roboto" FontSize="26" FontWeight="Bold" Foreground="DodgerBlue" VerticalAlignment="Center" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="0 0 16 0"/>
            <TextBlock Grid.Row="1" Text="CENTER" FontFamily="Roboto" FontSize="26" FontWeight="Bold" Foreground="DodgerBlue" VerticalAlignment="Center" HorizontalAlignment="Left" IsHitTestVisible="False" Margin="248,0,0,0" Height="36" Width="97"/>
        </Grid>

Any ideas are greatly appreciated. Thank you.

CodePudding user response：

Applying Column.Span="2" stretches the Button to go down through the TextBlock.

This is a simple sample code.

        <Grid>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Button
                Grid.Row="0"
                Grid.RowSpan="2"
                Grid.Column="0"
                Content="img" />

            <Button
                Grid.Row="0"
                Grid.Column="1"
                Grid.ColumnSpan="2"
                HorizontalContentAlignment="Left"
                Click="Button_Click"
                Content="85.000 MHz" />
            <TextBlock
                Grid.Row="0"
                Grid.Column="2"
                HorizontalAlignment="Right"
                VerticalAlignment="Center"
                IsHitTestVisible="False"
                Text="START" />

            <Button
                Grid.Row="1"
                Grid.Column="1"
                Grid.ColumnSpan="2"
                HorizontalContentAlignment="Left"
                Click="Button_Click"
                Content="85.000 MHz" />
            <TextBlock
                Grid.Row="1"
                Grid.Column="2"
                HorizontalAlignment="Right"
                VerticalAlignment="Center"
                IsHitTestVisible="False"
                Text="CENTER" />

        </Grid>