MGUI

MGUI is a UI framework for MonoGame (Src) that features a powerful layout engine and data binding engine similar to WPF, and a robust set of controls to build your UI with.

All control names are prefixed with 'MG' and many controls have similar names and properties to what you might find in WPF. Currently supported controls:

'Container'-like Controls that define their own logic for arranging their children:
- MGDockPanel
- MGGrid
- MGOverlayPanel
- MGStackPanel
- MGUniformGrid
Controls that can have child Content:
- MGBorder
- MGButton
- MGCheckBox
- MGComboBox
- MGContextMenu
- MGContextMenuItem
- MGXAMLDesigner
- MGExpander
- MGGroupBox
- MGListBox
- MGListView
- MGProgressButton
- MGRadioButton
- MGScrollViewer
- MGTabControl
- MGTabItem
- MGToggleButton
- MGToolTip
- MGWindow
Controls that cannot have child Content:
- MGGridSplitter
- MGImage
- MGPasswordBox
- MGProgressBar
- MGRatingControl
- MGResizeGrip
- MGSeparator
- MGSlider
- MGStopwatch
- MGTextBlock
- MGTextBox
- MGTimer

Wiki is under construction. More documentation coming soon... maybe...

Examples

A simple registration window created with MGUI:

<details> <summary>XAML Markup:</summary>

<Window xmlns="clr-namespace:MGUI.Core.UI.XAML;assembly=MGUI.Core"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Left="440" Top="20" MinWidth="300" SizeToContent="Height">

    <!-- Replace the window's Title bar with custom content -->
    <Window.TitleBar>
        <!-- The root-element of the window's Title bar must always be an DockPanel, but we can add whatever we want to it -->
        <DockPanel Padding="5,2">
            <Rectangle Dock="Left" Width="16" Height="16" Stroke="Gray" StrokeThickness="1" Fill="Black" Margin="0,0,5,0">
                <Rectangle.ToolTip>
                    <ToolTip Padding="8,4" MinHeight="0" SizeToContent="WidthAndHeight" TextForeground="RoyalBlue" Background="White * 0.85">
                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="[b]Pretend this is a window icon[/b]" />
                    </ToolTip>
                </Rectangle.ToolTip>
            </Rectangle>

            <TextBlock FontSize="10" Foreground="White" Text="Registration Form" />
        </DockPanel>
    </Window.TitleBar>

    <DockPanel Margin="5">
        <!-- Window header -->
        <StackPanel Dock="Top" Orientation="Vertical">
            <TextBlock Dock="Top" HorizontalAlignment="Center" FontSize="14" Foreground="Orange" Text="Register for a new account" />
            <Separator Size="3" Orientation="Horizontal" Background="Orange * 0.5" />
        </StackPanel>

        <!-- Register -->
        <Button Name="Button_Register" Dock="Bottom" Background="Orange" HorizontalAlignment="Center" Padding="25,5">
            <TextBlock Text="[b]Register[/b]" FontSize="14" />
        </Button>

        <Border BorderBrush="Black" BorderThickness="1">
            <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Padding="8" Margin="0,10,0,15" Background="White * 0.08">
                <StackPanel Orientation="Vertical">
                    <StackPanel.Styles>
                        <Style TargetType="HeaderedContentPresenter">
                            <Setter Property="HeaderPosition" Value="Top" />
                            <Setter Property="Spacing" Value="2" />
                        </Style>
                    </StackPanel.Styles>

                    <!-- Email -->
                    <HeaderedContentPresenter>
                        <HeaderedContentPresenter.Header>
                            <TextBlock Text="Email:" Foreground="Gray" />
                        </HeaderedContentPresenter.Header>
                        <TextBox Name="TextBox_Email" PlaceholderText="[i][opacity=0.5]Email[/opacity][/i]" CharacterLimit="40" ShowCharacterCount="false" AcceptsReturn="false" AcceptsTab="false" />
                    </HeaderedContentPresenter>
                    <Spacer Height="8" />

                    <!-- Username -->
                    <HeaderedContentPresenter>
                        <HeaderedContentPresenter.Header>
                            <TextBlock Text="Username:" Foreground="Gray" />
                        </HeaderedContentPresenter.Header>
                        <TextBox Name="TextBox_Username" PlaceholderText="[i][opacity=0.5]Username[/opacity][/i]" CharacterLimit="16" ShowCharacterCount="true" AcceptsReturn="false" AcceptsTab="false">
                            <TextBox.ToolTip>
                                <ToolTip SizeToContent="WidthAndHeight" TextForeground="Red" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
                                    <TextBlock WrapText="True" LinePadding="10" FontSize="10" Text="Must contain only alphanumeric characters.\nCannot exceed [b]16[/b] characters." />
                                </ToolTip>
                            </TextBox.ToolTip>
                        </TextBox>
                    </HeaderedContentPresenter>
                    <Spacer Height="8" />

                    <!-- Password -->
                    <HeaderedContentPresenter>
                        <HeaderedContentPresenter.Header>
                            <TextBlock Text="Password:" Foreground="Gray" />
                        </HeaderedContentPresenter.Header>
                        <PasswordBox Name="TextBox_Password" PasswordCharacter="*" Text="Hunter2" />
                    </HeaderedContentPresenter>
                    <Spacer Height="16" />

                    <!-- Terms of service -->
                    <CheckBox Name="CheckBox_TOS" IsChecked="true">
                        <TextBlock Text="I agree to the [Action=OpenTOS][color=#3483eb][i][u]Terms of service[/u][/i][/color][/Action]" />
                    </CheckBox>
                </StackPanel>
            </ScrollViewer>
        </Border>
    </DockPanel>
</Window>

</details>

<details> <summary>XAML Markup</summary>

<Window xmlns="clr-namespace:MGUI.Core.UI.XAML;assembly=MGUI.Core"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Left="420" Top="20" SizeToContent="WidthAndHeight" WindowStyle="None" AllowsClickThrough="True">
    <OverlayPanel TextForeground="Black" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button Name="Button_Close" HorizontalAlignment="Right" VerticalAlignment="Top" Content="[b]X" TextForeground="Red" Padding="3,2,3,0"
                BorderBrush="RGB(91,43,42)" BorderThickness="2" Background="rgb(242,191,114)" ZIndex="100" />

        <InputConsumer Margin="0,12,12,0">
            <TabControl Background="RGB(255,203,123)" BorderBrush="RGB(177,78,5)" BorderThickness="0" MinWidth="300" MinHeight="300" Padding="0">
                <TabControl.HeadersPanel>
                    <StackPanel Orientation="Horizontal" Margin="35,0,0,0" Spacing="0" />
                </TabControl.HeadersPanel>
                <TabControl.SelectedTabHeaderTemplate>
                    <Button Padding="2,1" BorderThickness="2,2,2,0" BorderBrush="rgb(177,78,5)" Background="rgb(255,210,132)" VerticalAlignment="Bottom" />
                </TabControl.SelectedTabHeaderTemplate>
                <TabControl.UnselectedTabHeaderTemplate>
                    <Button Padding="2,3" BorderThickness="2,2,2,0" BorderBrush="rgb(177,78,5)" Background="rgb(228,174,110)" VerticalAlignment="Bottom" />
                </TabControl.UnselectedTabHeaderTemplate>

                <TabItem Padding="0">
                    <TabItem.Header>
                        <TextBlock Text="[b]1" Foreground="Black" Padding="5,2" />
                    </TabItem.Header>

                    <!-- Content of the first tab -->
                    <Border BorderThickness="9">
                        <Border.BorderBrush>
                            <BandedBorderBrush>
                                <BorderBand Brush="RGB(133,54,5)" />
                                <BorderBand Brush="RGB(250,147,5)" />
                                <BorderBand Brush="RGB(177,78,5)" />
                            </BandedBorderBrush>
                        </Border.BorderBrush>

                        <StackPanel Orientation="Vertical">

                            <!-- 4x12 grid of 48x48 px slots -->
                            <UniformGrid Name="UniformGrid_Inventory" Rows="4" Columns="12" CellSize="48,48" Margin="16,8,16,12" HeaderRowHeight="15" RowSpacing="3">
                                <UniformGrid.Styles>
                                    <Style TargetType="TextBlock">
                                        <Setter Property="Foreground" Value="Gray" />
                                        <Setter Property="FontSize" Value="8" />
                                        <Setter Property="HorizontalAlignment" Value="Center" />
                                        <Setter Property="VerticalAlignment" Value="Center" />
                                    </Style>
                                </UniformGrid.Styles>
                                <TextBlock Foreground="Red" Text="1" Row="0" Column="0" />
                                <TextBlock Text="2" Row="0" Column="1" />
                                <TextBlock Text="3" Row="0" Column="2" />
                                <TextBlock Text="4" Row="0" Column="3" />
                                <TextBlock Text="5" Row="0" Column="4" />
                                <TextBlock Text="6" Row="0" Column="5" />
                                <TextBlock Text="7" Row="0" Column="6" />

MGUI

Install / Use

README

MGUI

Examples