CODEWITHSUNDEEP
c#wpf
Hatted Rooster
Hatted Rooster

Reputation: 36493

Set button margin with auto window size

I've created a simple custom messagebox that automatically scales depending on the length of the text to be displayed :

public partial class CustomMessageBox : Window
{
    public CustomMessageBox(string title, string text)
    {
        InitializeComponent();
        ResizeMode = ResizeMode.NoResize;
        label.Content = text;
        Title = title;
    }

    public static void Show(string title, string text)
    {
        CustomMessageBox box = new CustomMessageBox(title, text);
        box.SizeToContent = SizeToContent.WidthAndHeight;
        box.ShowDialog();
    }

    private void button_Click(object sender, RoutedEventArgs e)
    {
        Close();
    }
}

This works nicely however my button is clamping to the bottom side of the window because the window automatically scales :

clamping

And the button seems to be moving once the message gets longer :

moving button

How would I make sure the button stays centered and have a margin of around 10px from the bottom so it doesn't look that clamped?

I tried to set the Margin manually but that doesn't seem to work.

XAML (largely generated by the designer) :

<Window x:Class="RapidEvent.CustomMessageBox"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:RapidEvent"
        mc:Ignorable="d"
        Background="{DynamicResource WindowBackgroundBrush}"
        Title="" Height="Auto" Width="Auto">
    <Grid>
        <StackPanel>
            <Label x:Name="label" Content="" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top" FontSize="13px" RenderTransformOrigin="0.392,0.486"/>
            <Button x:Name="button" x:FieldModifier="public" IsDefault="True" Content="_Ok" HorizontalAlignment="Left" Margin="110,40,0,0" VerticalAlignment="Top" Width="80" Height="21" Click="button_Click"/>
        </StackPanel>
    </Grid>
</Window>

Upvotes: 3

Views: 2104

Answers (2)

Radin Gospodinov
Radin Gospodinov

Reputation: 2323

Use grid instead of StackPanel:

   <Grid >
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
                <telerik:Label x:Name="label" Content="LSFFD" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top" FontSize="13px" RenderTransformOrigin="0.392,0.486"/>
                <Button Grid.Row="1" x:Name="button" x:FieldModifier="public"  Content="_Ok" HorizontalAlignment="Center" Margin="0 0 0 10" VerticalAlignment="Bottom" Width="80" Height="21" Click="button_Click"/>

        </Grid>

Upvotes: 2

ChrisF
ChrisF

Reputation: 137148

Simply change your StackPanel to a Grid and the HorizonalAlignment of your button to Center and take off all but the bottom margin. You'll also need to set the VerticalAlignment to Bottom. You also need to put the button on row 1.

This way the button will be clamped to the bottom of the dialog and always centred.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Label x:Name="label" Content=""
               HorizontalAlignment="Left" Margin="10,0,0,0"
               VerticalAlignment="Top" FontSize="13px"
               RenderTransformOrigin="0.392,0.486"/>
        <Button Grid.Row="1" x:Name="button" x:FieldModifier="public"
                IsDefault="True" Content="_Ok"
                HorizontalAlignment="Center" Margin="0,0,0,20"
                VerticalAlignment="Bottom" Width="80" Height="21"/>
    </Grid>

Upvotes: 2

Related Questions