Search code examples
silverlightbindingcontroltemplatechildwindow

Defining own ChildWindow with BusyIndicator


I'm trying to create my own ChildWindow whith BusyIndicator. This ChildWindow will be a base class for my other child windows. I started from creating a class which inherits from ChildWindow and I added some additional DependencyProperties.

 public class ChildWindowBase : ChildWindow
    {

        public bool IsBusy
        {
            get { return (bool)GetValue(IsBusyProperty); }
            set { SetValue(IsBusyProperty, value); }
        }


        public static readonly DependencyProperty IsBusyProperty =
            DependencyProperty.Register("IsBusy", typeof(bool), typeof(ChildWindowBase), new PropertyMetadata(false));



        public string BusyContent
        {
            get { return (string)GetValue(BusyContentProperty); }
            set { SetValue(BusyContentProperty, value); }
        }

        // Using a DependencyProperty as the backing store for BusyContent.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty BusyContentProperty =
            DependencyProperty.Register("BusyContent", typeof(string), typeof(ChildWindowBase), new PropertyMetadata("Busy..."));

    }

In the next step I created a style which modifies template of ChildWindow

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    xmlns:Controls="clr-namespace:Sockets.Shared.Controls;assembly=Sockets.Shared">

    <Style TargetType="Controls:ChildWindowBase">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <toolkit:BusyIndicator HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BusyContent="{TemplateBinding BusyContent}" IsBusy="{TemplateBinding IsBusy}" >
                        <ContentPresenter Content="{TemplateBinding Content}"></ContentPresenter>
                    </toolkit:BusyIndicator>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Now if I want to create another ChildWindow I do sth like that

<Controls:ChildWindowBase x:Class="Client.Silverlight.Views.LoginView"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
           Title="LoginView" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
                     xmlns:Controls="clr-namespace:Sockets.Shared.Controls;assembly=Sockets.Shared" Width="400" Height="300" IsBusy="True">
//some code in here
</Controls:ChildWindowBase>

The problem is that my ChildWindows do not have an application bar (bar with close button and window title). Is there any way to modify my template to show it, or maybe I have to write my custom application bar? If so what is the best way to do that ?


Solution

  • A ChildWindow has a ContentTemplate property. Set your BusyWindow template in the ContentTemplate rather than the Template property and it should work.

    <Style TargetType="local:ChildWindowBase">
        <!--<Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <toolkit:BusyIndicator 
                        x:Name="BusyIndicator"
                       HorizontalAlignment="Stretch" 
                       VerticalAlignment="Stretch" 
                       BusyContent="{Binding BusyContent, RelativeSource={RelativeSource TemplatedParent}}" 
                       IsBusy="{Binding IsBusy, RelativeSource={RelativeSource TemplatedParent}}" >
                        <ContentPresenter Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" />
                    </toolkit:BusyIndicator>
                </DataTemplate>
            </Setter.Value>
        </Setter>-->
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="TabNavigation" Value="Cycle"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="BorderThickness" Value="1"/>
        <!--<Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0"/>
                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                    <GradientStop Color="#FF718597" Offset="0.375"/>
                    <GradientStop Color="#FF617584" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>-->
        <Setter Property="OverlayBrush" Value="#7F000000"/>
        <Setter Property="OverlayOpacity" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:ChildWindowBase">
                    <Grid x:Name="Root">
                        <Grid.Resources>
                            <Style x:Key="ButtonStyle" TargetType="Button">
                                <Setter Property="Background" Value="#FF1F3B53"/>
                                <Setter Property="Foreground" Value="#FF000000"/>
                                <Setter Property="Padding" Value="3"/>
                                <Setter Property="BorderThickness" Value="1"/>
                                <Setter Property="BorderBrush">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FFA3AEB9" Offset="0"/>
                                            <GradientStop Color="#FF8399A9" Offset="0.375"/>
                                            <GradientStop Color="#FF718597" Offset="0.375"/>
                                            <GradientStop Color="#FF617584" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="Button">
                                            <Grid x:Name="grid" Background="#02FFFFFF" HorizontalAlignment="Center" Height="14" VerticalAlignment="Center" Width="15">
                                                <VisualStateManager.VisualStateGroups>
                                                    <VisualStateGroup x:Name="CommonStates">
                                                        <VisualState x:Name="Normal"/>
                                                        <VisualState x:Name="MouseOver">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="X_Fuzz2">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="X_Fuzz1">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="X_Fuzz0">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <DoubleAnimation Duration="0" To="0.95" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="X"/>
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="Pressed">
                                                            <Storyboard>
                                                                <DoubleAnimation Duration="0" To="0.85" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="X"/>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="X_Fuzz2">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="X_Fuzz1">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="X_Fuzz0">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="Disabled">
                                                            <Storyboard>
                                                                <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="X"/>
                                                            </Storyboard>
                                                        </VisualState>
                                                    </VisualStateGroup>
                                                </VisualStateManager.VisualStateGroups>
                                                <Path x:Name="X_Fuzz2" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z" Fill="#14C51900" HorizontalAlignment="Center" Height="8" Margin="0,-1,0,0" Opacity="1" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Stroke="#14C51900" Visibility="Collapsed" VerticalAlignment="Center" Width="9">
                                                    <Path.RenderTransform>
                                                        <TransformGroup>
                                                            <ScaleTransform ScaleY="1.3" ScaleX="1.3"/>
                                                        </TransformGroup>
                                                    </Path.RenderTransform>
                                                </Path>
                                                <Path x:Name="X_Fuzz1" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z" Fill="#1EC51900" HorizontalAlignment="Center" Height="8" Margin="0,-1,0,0" Opacity="1" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Stroke="#1EC51900" Visibility="Collapsed" VerticalAlignment="Center" Width="9">
                                                    <Path.RenderTransform>
                                                        <TransformGroup>
                                                            <ScaleTransform ScaleY="1.1" ScaleX="1.1"/>
                                                        </TransformGroup>
                                                    </Path.RenderTransform>
                                                </Path>
                                                <Path x:Name="X_Fuzz0" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z" Fill="#FFC51900" HorizontalAlignment="Center" Height="8" Margin="0,-1,0,0" Opacity="1" Stretch="Fill" Stroke="#FFC51900" Visibility="Collapsed" VerticalAlignment="Center" Width="9"/>
                                                <Path x:Name="X" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z" Fill="#FFFFFFFF" HorizontalAlignment="Center" Height="8" Margin="0,-1,0,0" Opacity="0.7" Stretch="Fill" VerticalAlignment="Center" Width="9">
                                                    <Path.Stroke>
                                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                            <GradientStop Color="#FF313131" Offset="1"/>
                                                            <GradientStop Color="#FF8E9092" Offset="0"/>
                                                        </LinearGradientBrush>
                                                    </Path.Stroke>
                                                </Path>
                                            </Grid>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Grid.Resources>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="WindowStates">
                                <VisualState x:Name="Open">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Overlay">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                            <EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX" Storyboard.TargetName="ContentRoot">
                                            <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="1"/>
                                            <SplineDoubleKeyFrame KeySpline="0,0,0.5,1" KeyTime="00:00:00.45" Value="1.05"/>
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.55" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY" Storyboard.TargetName="ContentRoot">
                                            <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="1"/>
                                            <SplineDoubleKeyFrame KeySpline="0,0,0.5,1" KeyTime="00:00:00.45" Value="1.05"/>
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.55" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Closed">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Overlay">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                            <EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX" Storyboard.TargetName="ContentRoot">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1"/>
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05"/>
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY" Storyboard.TargetName="ContentRoot">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1"/>
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05"/>
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid x:Name="Overlay" Background="{TemplateBinding OverlayBrush}" HorizontalAlignment="Stretch" Margin="0" Opacity="{TemplateBinding OverlayOpacity}" VerticalAlignment="Top"/>
                        <Grid x:Name="ContentRoot" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Height="{TemplateBinding Height}" RenderTransformOrigin="0.5,0.5" VerticalAlignment="{TemplateBinding VerticalAlignment}" Width="{TemplateBinding Width}">
                            <Grid.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Grid.RenderTransform>
                            <Border BorderBrush="#14000000" BorderThickness="1" Background="#14000000" CornerRadius="2" HorizontalAlignment="Stretch" Margin="-1" VerticalAlignment="Stretch"/>
                            <Border BorderBrush="#0F000000" BorderThickness="1" Background="#0F000000" CornerRadius="2.25" HorizontalAlignment="Stretch" Margin="-2" VerticalAlignment="Stretch"/>
                            <Border BorderBrush="#0C000000" BorderThickness="1" Background="#0C000000" CornerRadius="2.5" HorizontalAlignment="Stretch" Margin="-3" VerticalAlignment="Stretch"/>
                            <Border BorderBrush="#0A000000" BorderThickness="1" Background="#0A000000" CornerRadius="2.75" HorizontalAlignment="Stretch" Margin="-4" VerticalAlignment="Stretch"/>
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="#FFFFFFFF" CornerRadius="2">
                                <Border CornerRadius="1.5" Margin="1">
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FFE5E8EB" Offset="1"/>
                                            <GradientStop Color="#FFF6F8F9" Offset="0"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition/>
                                        </Grid.RowDefinitions>
                                        <Border x:Name="Chrome" BorderBrush="#FFFFFFFF" BorderThickness="0,0,0,1" Width="Auto">
                                            <Border.Background>
                                                <LinearGradientBrush EndPoint="0.5,0.528" StartPoint="0.5,0">
                                                    <GradientStop Color="#FFE5E8EB" Offset="1"/>
                                                    <GradientStop Color="#FFFEFEFE" Offset="0"/>
                                                </LinearGradientBrush>
                                            </Border.Background>
                                            <Grid Height="Auto" Width="Auto">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition/>
                                                    <ColumnDefinition Width="30"/>
                                                </Grid.ColumnDefinitions>
                                                <ContentControl Content="{TemplateBinding Title}" FontWeight="Bold" HorizontalAlignment="Stretch" IsTabStop="False" Margin="6,0,6,0" VerticalAlignment="Center"/>
                                                <Button x:Name="CloseButton" Grid.Column="1" HorizontalAlignment="Center" Height="14" IsTabStop="False" Style="{StaticResource ButtonStyle}" VerticalAlignment="Center" Width="15"/>
                                            </Grid>
                                        </Border>
                                        <Border Background="{TemplateBinding Background}" Margin="7" Grid.Row="1">
                                            <toolkit:BusyIndicator 
                                               HorizontalAlignment="Stretch" 
                                               VerticalAlignment="Stretch" 
                                               BusyContent="{TemplateBinding BusyContent}" 
                                               IsBusy="{TemplateBinding IsBusy}" >
                                                <ContentPresenter Content="{TemplateBinding Content}" />
                                            </toolkit:BusyIndicator>
                                            <!--<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />-->
                                            <!--<ContentPresenter x:Name="ContentPresenter" 
                                                              Content="{TemplateBinding Content}" 
                                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                                <ContentPresenter.ContentTemplate>
                                                    <DataTemplate>
                                                        <ContentPresenter Grid.Row="1" Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" />
                                                    </DataTemplate>
                                                </ContentPresenter.ContentTemplate>
                                            </ContentPresenter>-->
                                        </Border>
                                    </Grid>
                                </Border>
                            </Border>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>