Skip to content
Jan Karger edited this page Jan 27, 2018 · 9 revisions

Usage

Directly in XAML

<simpleChildWindow:ChildWindow
                 IsOpen="{Binding IsChildWindowOpenOrNotProperty}"
                 HorizontalContentAlignment="Stretch"
                 VerticalContentAlignment="Stretch"
                 Padding="15"
                 ChildWindowImage="Error"
                 Title="TestChild 1">
  <Grid>
  </Grid>
</simpleChildWindow:ChildWindow>

Or with the ChildWindowManager

private async void OpenAChildWindow_OnButtonClick(object sender, RoutedEventArgs e)
{
  // opens a cool child window
  await this.ShowChildWindowAsync(new CoolChildWindow() { IsModal = false });
}

Overlay with Opacity

A modal ChildWindow uses by default the GrayBrush3 from MahApps for the OverlayBrush. So the overlay hides the complete content. You can use a SolidColorBrush with an opacity to make the overlay transparent.

<simpleChildWindow:ChildWindow x:Class="MahApps.Metro.SimpleChildWindow.Demo.OpacityTestChildWindow"
                               xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                               xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                               xmlns:simpleChildWindow="clr-namespace:MahApps.Metro.SimpleChildWindow;assembly=MahApps.Metro.SimpleChildWindow"
                               Title="Overlay with Opacity"
                               Padding="15"
                               d:DesignHeight="300"
                               d:DesignWidth="300"
                               AllowMove="True"
                               ShowCloseButton="True"
                               mc:Ignorable="d">

  <simpleChildWindow:ChildWindow.OverlayBrush>
    <SolidColorBrush Opacity="0.8" Color="{StaticResource Gray2}" />
    <!--  or like the MahApps overlay
    <SolidColorBrush Opacity="0.7" Color="{StaticResource BlackColor}" />
    -->
  </simpleChildWindow:ChildWindow.OverlayBrush>

  <StackPanel Margin="20">
    <StackPanel Orientation="Horizontal">
      <Button Margin="5" Content="Import" />
      <Button Margin="5" Content="Export" />
      <Button Margin="5" Content="Reset To Default" />
    </StackPanel>
  </StackPanel>
</simpleChildWindow:ChildWindow>

image

Stretch with Margin

<Grid x:Name="LayoutRoot">
  <simpleChildWindow:ChildWindow x:Name="child01"
                                 Title="TestChild 1"
                                 Padding="15"
                                 HorizontalContentAlignment="Stretch"
                                 VerticalContentAlignment="Stretch"
                                 CloseByEscape="False"
                                 IsAutoCloseEnabled="True">
    <!--  Content  -->
  </simpleChildWindow:ChildWindow>
</Grid>

image

Without Shadow

<Grid x:Name="LayoutRoot">
  <simpleChildWindow:ChildWindow x:Name="child02"
                                 Title="Testing..."
                                 ChildWindowHeight="300"
                                 ChildWindowWidth="400"
                                 EnableDropShadow="False">
    <!--  Content  -->
  </simpleChildWindow:ChildWindow>
</Grid>

image

AutoSize and GlowBrush

<Grid x:Name="LayoutRoot">
  <simpleChildWindow:ChildWindow x:Name="child03"
                                 Title="Cool..."
                                 BorderBrush="{DynamicResource AccentBaseColorBrush}"
                                 BorderThickness="1"
                                 GlowBrush="{DynamicResource AccentColorBrush}"
                                 IsModal="False"
                                 ShowCloseButton="True">
    <!--  Content  -->
  </simpleChildWindow:ChildWindow>
</Grid>

image

Icon (IconTemplate)

<Grid x:Name="LayoutRoot">
  <simpleChildWindow:ChildWindow x:Name="child04"
                                 Title="Cool..."
                                 BorderBrush="{DynamicResource AccentBaseColorBrush}"
                                 BorderThickness="1"
                                 GlowBrush="{DynamicResource AccentColorBrush}"
                                 ShowCloseButton="True">

  <simpleChildWindow:ChildWindow.Icon>
    <iconPacks:PackIconModern Width="22"
                              Height="22"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              Foreground="{DynamicResource IdealForegroundColorBrush}"
                              Kind="Cog" />
  </simpleChildWindow:ChildWindow.Icon>

    <!--  Content  -->
  </simpleChildWindow:ChildWindow>
</Grid>

image

Movable

<Grid x:Name="LayoutRoot">
  <simpleChildWindow:ChildWindow x:Name="child05"
                                 Title="Cool..."
                                 BorderBrush="{DynamicResource AccentBaseColorBrush}"
                                 BorderThickness="1"
                                 GlowBrush="{DynamicResource AccentColorBrush}"
                                 AllowMove="True"
                                 ShowCloseButton="True">
    <!--  Content  -->
  </simpleChildWindow:ChildWindow>
</Grid>

image