Version

ExtendedTheme.xamTileManager.xaml

Code Example: Extended Theme for the xamTileManager Control

Description

The following code is a resource dictionary based on the Office2013 theme and containing styles for customizing the look of the xamTileManager control.

Code

In XAML:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:ig="http://schemas.infragistics.com/xaml"
                    xmlns:igPrim="http://schemas.infragistics.com/xaml/primitives"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                    xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
                    mc:Ignorable="PresentationOptions">
    <!-- ********************************** BRUSHES ********************************** -->
    <!-- Tile Brushes -->
    <SolidColorBrush x:Key="TileBackgroundBrush" Color="#FFFFFFFF" />
    <SolidColorBrush x:Key="TileBorderBrush" Color="#FF92C0E0" />
    <!-- Changed -->
    <SolidColorBrush x:Key="TileHeaderBackgroundBrush" Color="#FFE5E5E5" />
    <SolidColorBrush x:Key="TileContentBackgroundBrush" Color="White" />
    <SolidColorBrush x:Key="TileSwapTargetBackgroundBrush" Color="#FF0072C6" Opacity="0.15" />
    <!-- TileManager Brushes -->
    <SolidColorBrush x:Key="TileManagerBackgroundBrush" Color="#00FFFFFF" />
    <SolidColorBrush x:Key="TileManagerBorderBrush" Color="#00FFFFFF" />
    <SolidColorBrush x:Key="TransparentBrush" Color="#00FFFFFF" />
    <SolidColorBrush x:Key="PopupBackgroundBrush" Color="#FFFFFFFF" />
    <SolidColorBrush x:Key="ForegroundBrush" Color="#FF444444" />
    <SolidColorBrush x:Key="PopupBorderBrush" Color="#FFABABAB" />
    <SolidColorBrush x:Key="LightForegroundBrush" Color="#FFFFFFFF" />
    <igPrim:TileManagerResourceString x:Key="CloseButtonToolTipContent" ResourceName="CloseButtonToolTip" />
    <igPrim:TileManagerResourceString x:Key="MaximizeButtonToolTipContent" ResourceName="MaximizeButtonToolTip" />
    <igPrim:TileManagerResourceString x:Key="MinimizeButtonToolTipContent" ResourceName="MinimizeButtonToolTip" />
    <igPrim:TileManagerResourceString x:Key="ExpandButtonToolTipContent" ResourceName="ExpandButtonToolTip" />
    <igPrim:TileManagerResourceString x:Key="CollapseButtonToolTipContent" ResourceName="CollapseButtonToolTip" />
<!-- *********************************  ValueConverters  ******************************** -->
    <igPrim:ValueConverterGroup x:Key="boolToVisibility">
        <!-- if true sets visibility to Visible -->
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.SourceValue>
                <sys:Boolean>True</sys:Boolean>
            </igPrim:FixedValueConverter.SourceValue>
            <igPrim:FixedValueConverter.DestinationValue>
                <Visibility>Visible</Visibility>
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
        <!-- if false sets visibility to Collapsed -->
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.DestinationValue>
                <Visibility>Collapsed</Visibility>
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
    </igPrim:ValueConverterGroup>
    <igPrim:ValueConverterGroup x:Key="closeActionToBool">
        <!-- if DoNothing converts to false -->
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.SourceValue>
                <ig:TileCloseAction>DoNothing</ig:TileCloseAction>
            </igPrim:FixedValueConverter.SourceValue>
            <igPrim:FixedValueConverter.DestinationValue>
                <sys:Boolean>False</sys:Boolean>
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
        <!-- else converts to true -->
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.DestinationValue>
                <sys:Boolean>True</sys:Boolean>
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
    </igPrim:ValueConverterGroup>
    <igPrim:ValueConverterGroup x:Key="stateToExpandCollapseTooltipConverter">
        <igPrim:FixedValueConverter DestinationValue="{StaticResource CollapseButtonToolTipContent}">
            <igPrim:FixedValueConverter.SourceValue>
                <ig:TileState>MinimizedExpanded</ig:TileState>
            </igPrim:FixedValueConverter.SourceValue>
        </igPrim:FixedValueConverter>
        <igPrim:FixedValueConverter DestinationValue="{StaticResource ExpandButtonToolTipContent}">
        </igPrim:FixedValueConverter>
    </igPrim:ValueConverterGroup>
    <igPrim:ValueConverterGroup x:Key="stateToMaximizeMinimizeTooltipConverter">
        <igPrim:FixedValueConverter DestinationValue="{StaticResource MinimizeButtonToolTipContent}">
            <igPrim:FixedValueConverter.SourceValue>
                <ig:TileState>Maximized</ig:TileState>
            </igPrim:FixedValueConverter.SourceValue>
        </igPrim:FixedValueConverter>
        <igPrim:FixedValueConverter DestinationValue="{StaticResource MaximizeButtonToolTipContent}">
        </igPrim:FixedValueConverter>
    </igPrim:ValueConverterGroup>
    <igPrim:ValueConverterGroup x:Key="stateToExpandedGlyphVisibilityConverter">
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.SourceValue>
                <ig:TileState>MinimizedExpanded</ig:TileState>
            </igPrim:FixedValueConverter.SourceValue>
            <igPrim:FixedValueConverter.DestinationValue>
                <Visibility>Collapsed</Visibility>
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.DestinationValue>
                <Visibility>Visible</Visibility>
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
    </igPrim:ValueConverterGroup>
    <igPrim:ValueConverterGroup x:Key="stateToCollapsededGlyphVisibilityConverter">
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.SourceValue>
                <ig:TileState>Minimized</ig:TileState>
            </igPrim:FixedValueConverter.SourceValue>
            <igPrim:FixedValueConverter.DestinationValue>
                <Visibility>Collapsed</Visibility>
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.DestinationValue>
                <Visibility>Visible</Visibility>
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
    </igPrim:ValueConverterGroup>
    <igPrim:ValueConverterGroup x:Key="stateToMaximizeGlyphVisibilityConverter">
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.SourceValue>
                <ig:TileState>Maximized</ig:TileState>
            </igPrim:FixedValueConverter.SourceValue>
            <igPrim:FixedValueConverter.DestinationValue>
                <Visibility>Collapsed</Visibility>
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.DestinationValue>
                <Visibility>Visible</Visibility>
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
    </igPrim:ValueConverterGroup>
    <igPrim:ValueConverterGroup x:Key="stateToRestoreGlyphVisibilityConverter">
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.SourceValue>
                <ig:TileState>Maximized</ig:TileState>
            </igPrim:FixedValueConverter.SourceValue>
            <igPrim:FixedValueConverter.DestinationValue>
                <Visibility>Visible</Visibility>
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.DestinationValue>
                <Visibility>Collapsed</Visibility>
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
    </igPrim:ValueConverterGroup>
    <igPrim:ValueConverterGroup x:Key="isSwappingToFillConverter">
        <igPrim:FixedValueConverter DestinationValue="{StaticResource TileSwapTargetBackgroundBrush}">
            <igPrim:FixedValueConverter.SourceValue>
                <sys:Boolean>True</sys:Boolean>
            </igPrim:FixedValueConverter.SourceValue>
        </igPrim:FixedValueConverter>
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.DestinationValue>
                <SolidColorBrush Color="#00FFFFFF" />
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
    </igPrim:ValueConverterGroup>
    <igPrim:ValueConverterGroup x:Key="isDraggingToOpacityConverter">
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.SourceValue>
                <sys:Boolean>True</sys:Boolean>
            </igPrim:FixedValueConverter.SourceValue>
            <igPrim:FixedValueConverter.DestinationValue>
                <sys:Double>75e-2</sys:Double>
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.DestinationValue>
                <sys:Double>1</sys:Double>
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
    </igPrim:ValueConverterGroup>
    <igPrim:ValueConverterGroup x:Key="HorizontalToVisibilityConverter">
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.SourceValue>
                <Orientation>Horizontal</Orientation>
            </igPrim:FixedValueConverter.SourceValue>
            <igPrim:FixedValueConverter.DestinationValue>
                <Visibility>Visible</Visibility>
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.DestinationValue>
                <Visibility>Collapsed</Visibility>
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
    </igPrim:ValueConverterGroup>
    <igPrim:ValueConverterGroup x:Key="VerticalToVisibilityConverter">
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.SourceValue>
                <Orientation>Vertical</Orientation>
            </igPrim:FixedValueConverter.SourceValue>
            <igPrim:FixedValueConverter.DestinationValue>
                <Visibility>Visible</Visibility>
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
        <igPrim:FixedValueConverter>
            <igPrim:FixedValueConverter.DestinationValue>
                <Visibility>Collapsed</Visibility>
            </igPrim:FixedValueConverter.DestinationValue>
        </igPrim:FixedValueConverter>
    </igPrim:ValueConverterGroup>
 <!-- *********************************  ToolTip Style  ********************************* -->
    <Style x:Key="ToolTipStyle" TargetType="ContentControl">
        <Setter Property="Background" Value="{StaticResource PopupBackgroundBrush}" />
        <Setter Property="BorderBrush" Value="{StaticResource PopupBorderBrush}" />
        <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
        <Setter Property="FontSize" Value="12" />
        <Setter Property="FontFamily" Value="Segoe UI" />
        <Setter Property="Padding" Value="4,2" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">
                    <Grid>
                        <Rectangle Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" StrokeThickness="{TemplateBinding BorderThickness}" />
                        <StackPanel Orientation="Horizontal">
                            <ContentPresenter Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" />
                        </StackPanel>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
<!-- ****************************** CaptionButton Style ********************************* -->
    <Style x:Key="CaptionButtonStyle" TargetType="ButtonBase">
        <Setter Property="IsTabStop" Value=" />
        <Setter Property="Background" Value="{StaticResource TransparentBrush}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="{StaticResource TransparentBrush}" />
        <Setter Property="Width" Value="16" />
        <Setter Property="Height" Value="15" />
        <Setter Property="Cursor" Value="Hand" />
    </Style>
<!-- ******************************** CloseButton Style ********************************* -->
    <Style x:Key="CloseButtonStyle" TargetType="Button" BasedOn="{StaticResource CaptionButtonStyle}">
        <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" igPrim:XamlHelper.SnapsToDevicePixels="True" Opacity="0.6">
                        <ToolTipService.ToolTip>
                            <ToolTip Style="{StaticResource ToolTipStyle}" Content="{Binding Value, Source={StaticResource CloseButtonToolTipContent}}" />
                        </ToolTipService.ToolTip>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Border">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.3" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Border">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Border">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Unfocused" />
                                <VisualState x:Name="Focused" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ValidationStates">
                                <VisualState x:Name="Valid" />
                                <VisualState x:Name="InvalidFocused" />
                                <VisualState x:Name="InvalidUnfocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Path x:Name="CloseGlyph" Width="10" Height="10" Stretch="Fill" Data="M8.4446707,-0.6250003 L10.625006,1.5604857 L7.1956725,4.9880161 L10.625,8.4285631 L8.5070467,10.625005 L5.0209293,7.1613607 L1.5554626,10.625 L-0.62499386,8.4862156 L2.8442898,5.0018182 L-0.625,1.5548685 L1.602536,-0.62499505 L5.0254283,2.8090899 z" Fill="{TemplateBinding Foreground}" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
<!-- ******************************* ExpandButton Style ********************************* -->
    <Style x:Key="ExpandButtonStyle" TargetType="Button" BasedOn="{StaticResource CaptionButtonStyle}">
        <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="Border" Background="{TemplateBinding Background}" igPrim:XamlHelper.SnapsToDevicePixels="True" CornerRadius="0,0,2,2" Opacity="0.6">
                        <ToolTipService.ToolTip>
                            <ToolTip Style="{StaticResource ToolTipStyle}" Tag="{Binding Path=Tag.State, Converter={StaticResource stateToExpandCollapseTooltipConverter}, RelativeSource={RelativeSource TemplatedParent}}" Content="{Binding Path=Tag.Value, RelativeSource={RelativeSource Self}}" />
                        </ToolTipService.ToolTip>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Border">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.3" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Border">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Border">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid>
                            <Path x:Name="CollapsedImage" Width="10" Height="10" Data="M10.152689,7 L12,9.1923618 L5.9873667,15 L0,9.1927757 L1.8960046,7.0000067 L5.9755836,11.015704 z M10.152689,0 L12,2.1923614 L5.9873667,8 L0,2.1927762 L1.8960046,6.7055225E-06 L5.9755836,4.0157037 z" Fill="{TemplateBinding Foreground}" Stretch="Fill" Visibility="{Binding Tag.State, Converter={StaticResource stateToExpandedGlyphVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Center" VerticalAlignment="Center" StrokeThickness="0" />
                            <Path x:Name="NotCollapsedImage" Width="10" Height="10" Data="M5.9977837,6.5000005 L12.000001,11.849594 L10.15269,13.958994 L5.975584,10.25055 L1.8960054,13.959001 L6.2401591E-07,11.84998 z M5.9977832,0 L12,5.3495932 L10.152689,7.4589939 L5.9755836,3.7505503 L1.8960047,7.4590001 L0,5.3499799 z" Fill="{TemplateBinding Foreground}" Stretch="Fill" HorizontalAlignment="Center" Visibility="{Binding Tag.State, Converter={StaticResource stateToCollapsededGlyphVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="Center" StrokeThickness="0" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
<!-- ***************************** MaximizeButton Style ********************************* -->
    <Style x:Key="MaximizeButtonStyle" TargetType="Button" BasedOn="{StaticResource CaptionButtonStyle}">
        <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" igPrim:XamlHelper.SnapsToDevicePixels="True" Opacity="0.6">
                        <ToolTipService.ToolTip>
                            <ToolTip Style="{StaticResource ToolTipStyle}" Tag="{Binding Path=Tag.State, Converter={StaticResource stateToMaximizeMinimizeTooltipConverter}, RelativeSource={RelativeSource TemplatedParent}}" Content="{Binding Path=Tag.Value, RelativeSource={RelativeSource Self}}" />
                        </ToolTipService.ToolTip>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Border">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.3" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Border">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Border">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid>
                            <Border x:Name="MaximizeGlyph" Width="11" Height="11" Background="{StaticResource LightForegroundBrush}" BorderBrush="{TemplateBinding Foreground}" BorderThickness="1,3,1,1" Visibility="{Binding Tag.State, Converter={StaticResource stateToMaximizeGlyphVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
                            <Path x:Name="RestoreGlyph" Width="16" Height="12" Stretch="Fill" Visibility="{Binding Tag.State, Converter={StaticResource stateToRestoreGlyphVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" Data="M2.9999905,8 L2.9999905,13.189775 L11,13.189775 L11,8 z M10.936987,2.9552236 L10.936987,5.1449995 L14,5.1449995 L14,8.044776 L18.937006,8.044776 L18.937006,2.9552236 z M7.936996,0 L21.936996,0 L21.936996,10.999999 L14,10.999999 L14,16.144999 L0,16.144999 L0,5.1449995 L7.936996,5.1449995 z" Fill="{TemplateBinding Foreground}" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
<!-- **********************  TileHeaderPresenter Style  ********************************* -->
    <Style x:Key="TileHeaderPresenterStyle" TargetType="igPrim:TileHeaderPresenter">
        <Setter Property="TextBlock.TextTrimming" Value="WordEllipsis" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Padding" Value="6,4,4,4" />
        <Setter Property="Background" Value="{StaticResource TileHeaderBackgroundBrush}" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="BorderThickness" Value="0,0,0,1" />
        <Setter Property="BorderBrush" Value="{StaticResource TileBorderBrush}" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="FontStretch" Value="Expanded" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="igPrim:TileHeaderPresenter">
                    <Grid>
                        <Border>
                            <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                                <Grid Margin="{TemplateBinding Padding}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Image x:Name="image" Grid.Column="0" Source="{Binding Tile.Image, RelativeSource={RelativeSource TemplatedParent}}" Stretch="None" Visibility="{Binding Tile.HasImage, Converter={StaticResource boolToVisibility}, RelativeSource={RelativeSource TemplatedParent}}" />
                                    <ContentControl FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" Foreground="{StaticResource ForegroundBrush}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                        <ContentPresenter TextBlock.FontSize="14" />
                                    </ContentControl>
                                    <Button x:Name="ToggleExpandCollapse" Margin="0,0,10,0" AutomationProperties.Name="ToggleExpandCollapse" Grid.Column="2" IsTabStop=" Visibility="{Binding Tile.ExpandButtonVisibilityResolved, RelativeSource={RelativeSource TemplatedParent}}" CommandParameter="{TemplateBinding Tile}" Style="{StaticResource ExpandButtonStyle}" Opacity="1" Tag="{TemplateBinding Tile}" Height="10" Width="10">
                                        <ig:Commanding.Command>
                                            <igPrim:TileCommandSource EventName="Click" CommandType="ToggleMinimizedExpansion" ParameterBinding="{Binding Tile, RelativeSource={RelativeSource TemplatedParent}}" />
                                        </ig:Commanding.Command>
                                    </Button>
                                    <Button x:Name="ToggleMaximized" Margin="0,0,4,0" IsEnabled="{Binding Path=Tile.AllowMaximizeResolved, RelativeSource={RelativeSource TemplatedParent}}" AutomationProperties.Name="ToggleMaximized" Grid.Column="3" IsTabStop=" ClickMode="Release" Visibility="{Binding Tile.MaximizeButtonVisibilityResolved, RelativeSource={RelativeSource TemplatedParent}}" CommandParameter="{TemplateBinding Tile}" Style="{StaticResource MaximizeButtonStyle}" Opacity="1" Tag="{TemplateBinding Tile}" Height="12" Width="16">
                                        <ig:Commanding.Command>
                                            <igPrim:TileCommandSource EventName="Click" CommandType="ToggleMaximized" ParameterBinding="{Binding Tile, RelativeSource={RelativeSource TemplatedParent}}" />
                                        </ig:Commanding.Command>
                                    </Button>
                                    <Button x:Name="Close" IsEnabled="{Binding Path=Tile.CloseActionResolved, Converter={StaticResource closeActionToBool}, RelativeSource={RelativeSource TemplatedParent}}" AutomationProperties.Name="Close" Grid.Column="4" IsTabStop=" Visibility="{Binding Tile.CloseButtonVisibilityResolved, RelativeSource={RelativeSource TemplatedParent}}" CommandParameter="{TemplateBinding Tile}" Style="{StaticResource CloseButtonStyle}" Tag="{TemplateBinding Tile}" Opacity="1" Width="10" Height="10">
                                        <ig:Commanding.Command>
                                            <igPrim:TileCommandSource EventName="Click" CommandType="Close" ParameterBinding="{Binding Tile, RelativeSource={RelativeSource TemplatedParent}}" />
                                        </ig:Commanding.Command>
                                    </Button>
                                </Grid>
                            </Border>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="HorizontalAlignment" Value="Stretch" />
    </Style>
    <Style TargetType="igPrim:TileHeaderPresenter" BasedOn="{StaticResource TileHeaderPresenterStyle}" />
    <!-- *********************************  Tile Style  ********************************* -->
    <Style x:Key="XamTileStyle" TargetType="ig:XamTile">
        <Setter Property="FontSize" Value="14" />
        <Setter Property="FontFamily" Value="Segoe UI" />
        <Setter Property="FontWeight" Value="UltraLight" />
        <Setter Property="Background" Value="{StaticResource TileBackgroundBrush}" />
        <Setter Property="BorderBrush" Value="{StaticResource TileBorderBrush}" />
        <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ig:XamTile">
                    <Grid Background="{StaticResource TransparentBrush}" Margin="0">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="MouseOver" />
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="Disabled" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="MinimizedStates">
                                <VisualState x:Name="NotMinimized" />
                                <VisualState x:Name="MinimizedExpanded" />
                                <VisualState x:Name="Minimized" />
                                <VisualState x:Name="Maximized" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="Border" Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="{TemplateBinding BorderBrush}" Margin="0" Opacity="{Binding Path=(ig:XamTileManager.IsDragging), Converter={StaticResource isDraggingToOpacityConverter}, RelativeSource={RelativeSource TemplatedParent}}">
                            <Grid Background="{StaticResource TransparentBrush}">
                                <Grid Margin="{TemplateBinding Padding}">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <!-- Header area-->
                                    <igPrim:TileHeaderPresenter x:Name="TileHeader" AutomationProperties.AutomationId="TileHeader" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Tile="{Binding RelativeSource={RelativeSource TemplatedParent}}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" />
                                    <Border Visibility="{TemplateBinding ContentVisibility}" Margin="2,0,2,2" Grid.Row="1" Padding="4" Background="{StaticResource TileContentBackgroundBrush}">
                                        <!-- Content area-->
                                        <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplateResolved}" />
                                    </Border>
                                    <!-- Content area-->
                                </Grid>
                                <Rectangle x:Name="Overlay" IsHitTestVisible=" Fill="{Binding Path=(ig:XamTileManager.IsSwapTarget), Converter={StaticResource isSwappingToFillConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
                            </Grid>
                        </Border>
                        <!-- the following Canvas is used while animating state transitions. During an animation it may contain an image element.
                                                     The Canvas must be named "TransitionCanvas" and be a sibling of the root Border element.
                                                     Otherwise state transitions will not scale properly during the animations. -->
                        <Canvas Background="{StaticResource TransparentBrush}" x:Name="TransitionCanvas" IsHitTestVisible=" Visibility="Collapsed" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="ig:XamTile" BasedOn="{StaticResource XamTileStyle}" />
<!-- ******************************  TileManager Style  ********************************* -->
    <Style x:Key="XamTileManagerStyle" TargetType="ig:XamTileManager">
        <Setter Property="Background" Value="{StaticResource TileManagerBackgroundBrush}" />
        <Setter Property="BorderBrush" Value="{StaticResource TileManagerBorderBrush}" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="igPrim:XamlHelper.CanContentScroll" Value="true" />
        <Setter Property="igPrim:XamlHelper.SnapsToDevicePixels" Value="True" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Padding" Value="2" />
        <Setter Property="InterTileSpacingX" Value="6" />
        <Setter Property="InterTileSpacingY" Value="6" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ig:XamTileManager">
                    <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" igPrim:XamlHelper.SnapsToDevicePixels="true" Padding="{TemplateBinding Padding}">
                        <ScrollViewer igPrim:XamlHelper.Focusable=" Margin="0" BorderThickness="0" Padding="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >
                            <igPrim:TileAreaPanel x:Name="TilePanel" igPrim:XamlHelper.SnapsToDevicePixels="{TemplateBinding igPrim:XamlHelper.SnapsToDevicePixels}" />
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="ig:XamTileManager" BasedOn="{StaticResource XamTileManagerStyle}" />
</ResourceDictionary>