How to apply Modern UI Styles

Aug 7, 2013 at 2:38 PM
I'm working on a Modern UI application and i want to use the Modern UI text styles like HEADING1, HEADING2, etc.
Please i need help as I'm still new to WPF.
Aug 7, 2013 at 2:57 PM
Please, I'll also want to know how i can make use of the textbox focus validation style. Thanks in anticipation
Aug 8, 2013 at 9:31 AM
I solved the issue already. Sorry for asking such simple questions. Still trying to get a hang of WPF.
Aug 19, 2013 at 2:39 PM
Am also getting the hang of WPF could you please show how you solved your problem I'm also having the same problem
Coordinator
Aug 19, 2013 at 2:58 PM
The modern ui demo app (available in the download package, and in source) demonstrates the use of text styles in controls > styles > text. Applying a heading1 text styles is done like this;
<TextBlock Text="HEADING1" Style="{StaticResource Heading1}" />
All mui text styles are defined in the Themes\TextBlock.xaml resource
Aug 19, 2013 at 6:53 PM
Thanks for the quick MUI rocks
Aug 25, 2013 at 1:24 PM
Edited Aug 25, 2013 at 1:35 PM
Lets assume we want to override HorizontalAlignment and VerticalAlignment properties only for our Button.

You do it like this:
<Style x:Key="NlptButtonStyle" BasedOn="{StaticResource {x:Type Button}}" TargetType="Button">
    <Setter Property="HorizontalAlignment" Value="Center"></Setter>
    <Setter Property="VerticalAlignment" Value="Center"></Setter>
</Style>
If you want to override some other control instead of Button just change the Type.
Example: Somecontrol
<Style x:Key="NlptButtonStyle" BasedOn="{StaticResource {x:Type SomeControl}}" TargetType="SomeControl">
Styles in ModernUI are named the same as the name of control.

PS: kozw where did you find Themes\TextBlock.xaml resource ?
Coordinator
Aug 26, 2013 at 12:54 PM
In the source there's the FirstFloor.ModernUI project with two folders associated with XAML resources; Assets contains the mui styles for core WPF controls (such as button, textblock, etc). Themes contains the default styles for the MUI controls (such as ModernButton, ModernWindow, etc).
Aug 29, 2013 at 1:09 PM
I am new to Modern UI and WPF in general. I downloaded Modern UI and I was looking to change the theme to something like the Hello Kitty example. Do those themes come with the default Modern UI download or are those custom themes that someone else has done. If they do come with Modern UI by default, where can I find them and how can I change them?

Thanks in advance!
Aug 29, 2013 at 1:40 PM
Ok, well I figured out that there are only two themes by default. But I still need some advice on how I can add an image to my new theme so it will show up on each view. Thanks again, and sorry for the dumb question before. :)
Coordinator
Aug 30, 2013 at 2:36 PM
Correct, ModernUI comes with 2 builtin themes, light and dark. For custom theme development see this tutorial. The sample themes in the demo app can be found in the source code (see the FirstFloor.ModernUI.App project).
Jun 11, 2014 at 2:02 PM
How can we add Background image for the custom theme?
Jun 11, 2014 at 2:15 PM
I could set the background them by using the below style in the them resource dictionary file.

<Rectangle x:Key="WindowBackgroundContent" x:Shared="false" Margin="32">
    <Rectangle.Fill>
        <ImageBrush ImageSource="BgPicture.png" Stretch="UniformToFill" />
    </Rectangle.Fill>
</Rectangle>
Jun 19, 2014 at 7:41 PM
...look at the sample code in the source. it clearly shows how to do this.