ModernWindow: unable to set background image

Jun 4, 2014 at 2:38 PM
Hi all,

I've started using Modern UI recently with WPF in order to change a Windows Form application to WPF.

My first screen is a centered window with a background image (the image corners are rounded and in the middle it has two spaces for username and password). If I use a Window as follows, I'm able to set the background image as required:
<Window x:Class="MyWPFApp.Authentication"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Authentication" Height="298" Width="668" AllowsTransparency="True" WindowStyle="None">
    <Window.Background>
        <ImageBrush ImageSource="/Images/login.png"/>
    </Window.Background>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="3*"/>
            <RowDefinition Height="295*"/>
        </Grid.RowDefinitions>

    </Grid>
</Window>
However, if I use a ModernWindow, as follows, I'm unable to display the background image:
<mui:ModernWindow x:Class="MyWPFApp.Authentication"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:mui="http://firstfloorsoftware.com/ModernUI"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             FontFamily="Verdana"
             ResizeMode="NoResize" 
             WindowStartupLocation="CenterScreen"
             Title="Authentication"
             AllowsTransparency="True" 
             WindowStyle="None"
             Height="298" Width="668">
    <Window.Background>
        <ImageBrush ImageSource="/Images/login.png"/>
    </Window.Background>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="3*"/>
            <RowDefinition Height="295*"/>
        </Grid.RowDefinitions>

    </Grid>
</mui:ModernWindow>
I've also tried to create a style in App.Xaml and reference it on ModernWindow by using Style="{StaticResource MyStyle}" without success. The only way i'm able to set a background image is by creating a custom style, however, I only want to set the background image on this form.

Is there any way of setting directly the background image on modern window?

Thank you!
Coordinator
Jun 5, 2014 at 6:43 PM
MUI uses a WindowBackgroundContent resource for rendering the background. The resource should be a visual. Override the WindowBackgroundContent resource in your App.xaml like so;
<Rectangle x:Key="WindowBackgroundContent" x:Shared="false" Margin="32">
  <Rectangle.Fill>
    <ImageBrush ImageSource="[yourimage]" Stretch="UniformToFill" />
  </Rectangle.Fill>
</Rectangle>