search

Videogamers0 / MGUI

UI framework for MonoGame game engine.
MIT License
67 stars 8 forks source link

Centering Content within containers #20

Closed rufreakde closed 3 weeks ago

rufreakde commented 3 weeks ago

Hi so I looked through the code and examples and there seems to be no central mode for containers?

Any suggestion how to centralize such a main menu for example:

<Window xmlns="clr-namespace:MGUI.Core.UI.XAML;assembly=MGUI.Core"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:MGUI.Samples.Dialogs.FF7;assembly=MGUI.Samples"
        Name="windowMainMenu" Background="rgba(0, 0, 0, 0)" Left="0" Top="0" Width="1920" Height="1080" TextForeground="White" IsUserResizable="False" IsTitleBarVisible="False" BorderThickness="0">

    <StackPanel Orientation="Horizontal" Spacing="5">
        <StackPanel Orientation="Vertical" Spacing="5">
            <Button Name="btnPlay" Padding="2" Height="80" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Red" BorderThickness="2" Width= "250" MaxWidth="250">
                <TextBlock FontSize="24" IsShadowed="True" IsBold="false" TextAlignment="Center" Text="Play" />
            </Button>
            <Button Name="btnSettings" Padding="2" Height="80" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Red" BorderThickness="2" Width= "250" MaxWidth="250">
                <TextBlock FontSize="24" IsShadowed="True" IsBold="false" TextAlignment="Center" Text="Settings" />
            </Button>
            <Button Name="btnDesktop" Padding="2" Height="80" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Red" BorderThickness="2" Width= "250" MaxWidth="250">
                <TextBlock FontSize="24" IsShadowed="True" IsBold="false" TextAlignment="Center" Text="[Color=DarkOrange]Desktop[/Color]" />
            </Button>
        </StackPanel>
        <Border Width= "250" MinWidth="150" MaxWidth="250" BorderThickness="0">
        </Border>
        <StackPanel Orientation="Vertical" Spacing="5">
            <Button Name="btnUnitEditor" Padding="2" Height="80" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Red" BorderThickness="2" Width= "250" MaxWidth="250">
                <TextBlock FontSize="24" IsShadowed="True" IsBold="false" TextAlignment="Center" Text="Unit [Color=Aquamarine]Editor[/Color]" />
            </Button>
            <Button Name="btnOfficerEditor" Padding="2" Height="80" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Red" BorderThickness="2" Width= "250" MaxWidth="250">
                <TextBlock FontSize="24" IsShadowed="True" IsBold="false" TextAlignment="Center" Text="Officer [Color=Aquamarine]Editor[/Color]" />
            </Button>
            <Button Name="btnTerrainEditor" Padding="2" Height="80" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Red" BorderThickness="2" Width= "250" MaxWidth="250">
                <TextBlock FontSize="24" IsShadowed="True" IsBold="false" TextAlignment="Center" Text="Terrain [Color=Aquamarine]Editor[/Color]" />
            </Button>
            <Button Name="btnMapEditor" Padding="2" Height="80" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Red" BorderThickness="2" Width= "250" MaxWidth="250">
                <TextBlock FontSize="24" IsShadowed="True" IsBold="false" TextAlignment="Center" Text="Map [Color=Aquamarine]Editor[/Color]" />
            </Button>
        </StackPanel>
    </StackPanel>
</Window>

this would be a good example for the main page since Main Menues are the classic hello worlds.

image

Videogamers0 commented 3 weeks ago

To center a piece of content within its parent, you would use the HorizontalAlignment or VerticalAlignment properties on the child item. Alternatively, you could set HorizontalContentAlignment or VerticalContentAlignment on the parent item.

<Window xmlns="clr-namespace:MGUI.Core.UI.XAML;assembly=MGUI.Core">
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        ....
    </StackPanel>
</Window>

I also recommend using Styles if you intend to set many of the same property values on several elements.

For example:

<Window xmlns="clr-namespace:MGUI.Core.UI.XAML;assembly=MGUI.Core"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Name="windowMainMenu" Background="rgba(128,128,128,255)" Left="0" Top="0" Width="1280" Height="720" 
        TextForeground="White" IsUserResizable="False" IsTitleBarVisible="False" BorderThickness="5" BorderBrush="Red">
    <Window.Styles>
        <Style TargetType="Button" Name="MenuButtonStyle">
            <Setter Property="Padding" Value="2" />
            <Setter Property="MinHeight" Value="80" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="BorderBrush" Value="Red" />
            <Setter Property="BorderThickness" Value="2" />
            <Setter Property="MinWidth" Value="250" />
        </Style>
        <Style TargetType="TextBlock" Name="MenuTextBlockStyle">
            <Setter Property="FontSize" Value="24" />
            <Setter Property="IsShadowed" Value="true" />
            <Setter Property="IsBold" Value="false" />
            <Setter Property="TextAlignment" Value="Center" />
        </Style>
    </Window.Styles>

    <StackPanel Orientation="Horizontal" Spacing="5" HorizontalAlignment="Center" VerticalAlignment="Center">
        <StackPanel Orientation="Vertical" Spacing="5">
            <Button Name="btnPlay" StyleNames="MenuButtonStyle">
                <TextBlock StyleNames="MenuTextBlockStyle" Text="Play" />
            </Button>
            <Button Name="btnSettings" StyleNames="MenuButtonStyle">
                <TextBlock StyleNames="MenuTextBlockStyle" Text="Settings" />
            </Button>
            <Button Name="btnDesktop" StyleNames="MenuButtonStyle">
                <TextBlock StyleNames="MenuTextBlockStyle" Text="[Color=DarkOrange]Desktop[/Color]" />
            </Button>
        </StackPanel>
        <Border Width= "250" MinWidth="150" MaxWidth="250" BorderThickness="0">
        </Border>
        <StackPanel Orientation="Vertical" Spacing="5">
            <Button Name="btnUnitEditor" StyleNames="MenuButtonStyle">
                <TextBlock StyleNames="MenuTextBlockStyle" Text="Unit [Color=Aquamarine]Editor[/Color]" />
            </Button>
            <Button Name="btnOfficerEditor" StyleNames="MenuButtonStyle">
                <TextBlock StyleNames="MenuTextBlockStyle" Text="Officer [Color=Aquamarine]Editor[/Color]" />
            </Button>
            <Button Name="btnTerrainEditor" StyleNames="MenuButtonStyle">
                <TextBlock StyleNames="MenuTextBlockStyle" Text="Terrain [Color=Aquamarine]Editor[/Color]" />
            </Button>
            <Button Name="btnMapEditor" StyleNames="MenuButtonStyle">
                <TextBlock StyleNames="MenuTextBlockStyle" Text="Map [Color=Aquamarine]Editor[/Color]" />
            </Button>
        </StackPanel>
    </StackPanel>
</Window>

Result:

720p menu

rufreakde commented 3 weeks ago

Thank you very much this was so quick! (I cant use the intellisense in my project so sometimes its hard to find all properties...)

<Window xmlns="clr-namespace:MGUI.Core.UI.XAML;assembly=MGUI.Core"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:MGUI.Samples.Dialogs.FF7;assembly=MGUI.Samples"
        Name="windowMainMenu" Background="rgba(0, 0, 0, 0)" Left="0" Top="0" Width="1920" Height="1080" TextForeground="White" IsUserResizable="False" IsTitleBarVisible="False" BorderThickness="0">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="5">
        <StackPanel Orientation="Vertical" Spacing="5">
            <Button Name="btnPlay" Padding="2" Height="80" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Red" BorderThickness="2" Width= "250" MaxWidth="250">
                <TextBlock FontSize="24" IsShadowed="True" IsBold="false" TextAlignment="Center" Text="Play" />
            </Button>
            <Button Name="btnSettings" Padding="2" Height="80" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Red" BorderThickness="2" Width= "250" MaxWidth="250">
                <TextBlock FontSize="24" IsShadowed="True" IsBold="false" TextAlignment="Center" Text="Settings" />
            </Button>
            <Button Name="btnDesktop" Padding="2" Height="80" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Red" BorderThickness="2" Width= "250" MaxWidth="250">
                <TextBlock FontSize="24" IsShadowed="True" IsBold="false" TextAlignment="Center" Text="[Color=DarkOrange]Desktop[/Color]" />
            </Button>
        </StackPanel>
        <Border Width= "50" MinWidth="50" MaxWidth="80" BorderThickness="0">
        </Border>
        <StackPanel Orientation="Vertical" Spacing="5">
            <Button Name="btnUnitEditor" Padding="2" Height="80" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Red" BorderThickness="2" Width= "250" MaxWidth="250">
                <TextBlock FontSize="24" IsShadowed="True" IsBold="false" TextAlignment="Center" Text="Unit [Color=Aquamarine]Editor[/Color]" />
            </Button>
            <Button Name="btnOfficerEditor" Padding="2" Height="80" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Red" BorderThickness="2" Width= "250" MaxWidth="250">
                <TextBlock FontSize="24" IsShadowed="True" IsBold="false" TextAlignment="Center" Text="Officer [Color=Aquamarine]Editor[/Color]" />
            </Button>
            <Button Name="btnTerrainEditor" Padding="2" Height="80" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Red" BorderThickness="2" Width= "250" MaxWidth="250">
                <TextBlock FontSize="24" IsShadowed="True" IsBold="false" TextAlignment="Center" Text="Terrain [Color=Aquamarine]Editor[/Color]" />
            </Button>
            <Button Name="btnMapEditor" Padding="2" Height="80" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Red" BorderThickness="2" Width= "250" MaxWidth="250">
                <TextBlock FontSize="24" IsShadowed="True" IsBold="false" TextAlignment="Center" Text="Map [Color=Aquamarine]Editor[/Color]" />
            </Button>
        </StackPanel>
    </StackPanel>
</Window>

image