Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Apply MahApps.Metro theme and accent to other controls or rectangles

I'm trying to put a status bar on the bottom of my window that uses the same color scheme as the title bar. I know the piece I'm missing is style inheritance and/or template setting, but I've been reading for hours and I can't figure it out.

Here's how my window currently looks:

Window composition when run

Here's how it looks in the designer:

Window composition in the designer

What I want:

A status bar at the bottom of the window that mirrors the style of the titlebar. I recognize that my current implementation is probably less than great, so I'm also open to changing my statusbar defintiion as seen below. I tried to use an actual statusbar, but it wouldn't behave the way I wanted (the textboxes wouldn't fill the empty space, so the command line input textbox was very hard to click - maybe I was just doing something wrong). I'm assuming I can also apply the style to a rectangle just like anything else, right? I'm missing a critical component with the style property and probably the user of a template or a staticresource, but I'm totally lost.

Here's my current solution (a label and two textboxes for status updates and a cmdline):

<Grid Grid.Row="1">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*"/>
        <ColumnDefinition Width="0.5*"/>
    </Grid.ColumnDefinitions>
    <Label Grid.Column="0"/>
    <Grid  Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBox Grid.Row="0" Grid.Column="0"/>
        <TextBox Grid.Row="0" Grid.Column="1"/>
    </Grid>
</Grid>
like image 544
Anthony Avatar asked Dec 20 '22 12:12

Anthony


1 Answers

I solved this by using the AccentColorBrush resource in my status bar grid.

<Grid Grid.Row="1" Background="{DynamicResource AccentColorBrush}">

I found it by inspecting many XAML files in MahApps.Metro on GitHub. This may seem obvious to some people, but for someone who is trying to learn XAML/WPF/MVVM, this wasn't straight forward. I hope this helps someone as I struggled with it for quite a while.

like image 150
Anthony Avatar answered Jan 11 '23 22:01

Anthony