Version

CustomTheme.xamTileManager.xaml

Code Example: Custom Theme for xamTileManager Control

Description

The following code is a resource dictionary 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 ********************************** -->
      <SolidColorBrush x:Key="ForegroundBrush" Color="#FFBEC6D8" />
      <SolidColorBrush x:Key="DarkForegroundBrush" Color="#FF3E5587" />
      <SolidColorBrush x:Key="PopupBackgroundBrush" Color="#FFE4E7F0" />
      <SolidColorBrush x:Key="PopupBorderBrush" Color="#FF2E4272" />
    <!-- Preview Brushes -->
      <SolidColorBrush x:Key="PreviewBackgroundBrush" Color="#FF2E4272" />
      <SolidColorBrush x:Key="PreviewIconBackgroundBrush" Color="#FFE4E7F0" />
      <!-- TileAreaSplitter Brushes -->
      <SolidColorBrush x:Key="TileAreaSplitterBackgroundBrush" Color="#00FFFFFF" PresentationOptions:Freeze="true" />
      <SolidColorBrush x:Key="TileAreaSplitterBorderBrush" Color="#00FFFFFF" PresentationOptions:Freeze="true" />
      <SolidColorBrush x:Key="TileAreaSplitterForegroundBrush" Color="#FF2E4272" PresentationOptions:Freeze="true" />
      <SolidColorBrush x:Key="TileAreaSplitterThumbBackgroundBrush" Color="#FFE4E7F0" />
      <SolidColorBrush x:Key="TileAreaSplitterThumbBorderBrush" Color="#FF2E4272" />
      <SolidColorBrush x:Key="TileAreaSplitterThumbHoverBackgroundBrush" Color="#FF2E4272" />
      <SolidColorBrush x:Key="TileAreaSplitterThumbHoverBorderBrush" Color="#FF2E4272" />
      <!-- Tile Brushes -->
      <SolidColorBrush x:Key="TileBackgroundBrush" Color="#FF2E4172" />
      <SolidColorBrush x:Key="TileBorderBrush" Color="#FF2E4272" />
      <SolidColorBrush x:Key="TileHeaderBackgroundBrush" Color="#FF2E4272" />
      <SolidColorBrush x:Key="TileContentBackgroundBrush" Color="#FFE4E7F0" />
      <SolidColorBrush x:Key="TileSwapTargetBackgroundBrush" Color="#FF2E4272" Opacity="0.15" />
      <!-- TileManager Brushes -->
      <SolidColorBrush x:Key="TileManagerBackgroundBrush" Color="#00FFFFFF" />
      <SolidColorBrush x:Key="TileManagerBorderBrush" Color="#00FFFFFF" />
    <SolidColorBrush x:Key="TransparentBrush" Color="#00FFFFFF" />
      <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 DarkForegroundBrush}" />
            <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="6" Data="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="6" Data="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 TransparentBrush}" 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="BorderThickness" Value="0" />
            <Setter Property="FontSize" Value="14" />
            <Setter Property="Template">
                  <Setter.Value>
                        <ControlTemplate TargetType="igPrim:TileHeaderPresenter">
                              <Grid>
                                    <Border>
                                          <Border Background="{TemplateBinding Background}">
                                                <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}" />
      <!-- ********************************* Preview Style ********************************* -->
      <Style x:Key="PreviewStyle" TargetType="Control">
            <Setter Property="Template">
                  <Setter.Value>
                        <ControlTemplate TargetType="Control">
                              <Grid Margin="2,1">
                                    <Rectangle Fill="{StaticResource PreviewBackgroundBrush}" StrokeThickness="0" />
                                    <Path Width="2" Height="27" Data="M0,24 L3,24 3,27 0,27 z M0,18 L3,18 3,21 0,21 z M0,12 L3,12 3,15 0,15 z M0,6 L3,6 3,9 0,9 z M0,0 L3,0 3,3 0,3 z" Fill="{StaticResource PreviewIconBackgroundBrush}" Opacity="1" Stretch="Fill" igPrim:XamlHelper.SnapsToDevicePixels="true" Visibility="{Binding Path=(igPrim:TileAreaSplitter.Orientation), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource VerticalToVisibilityConverter}}" />
                                    <Path Width="27" Height="2" Data="M24,0 L27,0 27,3 24,3 z M18,0 L21,0 21,3 18,3 z M12,0 L15,0 15,3 12,3 z M6,0 L9,0 9,3 6,3 z M0,0 L3,0 3,3 0,3 z" Fill="{StaticResource PreviewIconBackgroundBrush}" Stretch="Fill" igPrim:XamlHelper.SnapsToDevicePixels="true" Visibility="{Binding Path=(igPrim:TileAreaSplitter.Orientation), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HorizontalToVisibilityConverter}}" />
                              </Grid>
                        </ControlTemplate>
                  </Setter.Value>
            </Setter>
      </Style>
      <!-- *********************************  TileAreaSplitterThumb Style  ********************************* -->
      <Style x:Key="TileAreaSplitterThumbStyle" TargetType="Thumb">
            <Setter Property="Template">
                  <Setter.Value>
                        <ControlTemplate TargetType="Thumb">
                              <Grid Background="{StaticResource TransparentBrush}">
                                    <VisualStateManager.VisualStateGroups>
                                          <VisualStateGroup x:Name="CommonStates">
                                                <VisualState x:Name="Normal" />
                                                <VisualState x:Name="MouseOver">
                                                      <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundElement">
                                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileAreaSplitterThumbHoverBackgroundBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BackgroundElement">
                                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileAreaSplitterThumbHoverBorderBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                      </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Pressed" />
                                                <VisualState x:Name="Disabled" />
                                          </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Border Margin="2,1,2,1" x:Name="BackgroundElement" Background="{StaticResource TileAreaSplitterThumbBackgroundBrush}" BorderBrush="{StaticResource TileAreaSplitterThumbBorderBrush}" BorderThickness="1" />
                              </Grid>
                        </ControlTemplate>
                  </Setter.Value>
            </Setter>
      </Style>
      <!-- *********************************  TileAreaSplitter Style  ********************************* -->
      <Style x:Key="TileAreaSplitterStyle" TargetType="igPrim:TileAreaSplitter">
            <Setter Property="PreviewStyle" Value="{StaticResource PreviewStyle}" />
            <Setter Property="Foreground" Value="{StaticResource TileAreaSplitterForegroundBrush}" />
            <Setter Property="Background" Value="{StaticResource TileAreaSplitterBackgroundBrush}" />
            <Setter Property="BorderBrush" Value="{StaticResource TileAreaSplitterBorderBrush}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="Template">
                  <Setter.Value>
                        <ControlTemplate TargetType="igPrim:TileAreaSplitter">
                              <Grid>
                                    <Thumb x:Name="Thumb" Style="{StaticResource TileAreaSplitterThumbStyle}" />
                                    <Border IsHitTestVisible=" MinWidth="14" MinHeight="14">
                                          <Grid>
                                                <Grid x:Name="verticalGlyphs" Visibility="{Binding Path=(igPrim:TileAreaSplitter.Orientation), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource VerticalToVisibilityConverter}}">
                                                      <Path Width="2" Height="27" Data="M0,24 L3,24 3,27 0,27 z M0,18 L3,18 3,21 0,21 z M0,12 L3,12 3,15 0,15 z M0,6 L3,6 3,9 0,9 z M0,0 L3,0 3,3 0,3 z" Fill="{TemplateBinding Foreground}" Opacity="1" Stretch="Fill" igPrim:XamlHelper.SnapsToDevicePixels="true" />
                                                </Grid>
                                                <Grid x:Name="horizontalGlyphs" Visibility="{Binding Path=(igPrim:TileAreaSplitter.Orientation), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HorizontalToVisibilityConverter}}">
                                                      <Path Width="27" Height="2" Margin="0,0,0,0" Data="M24,0 L27,0 27,3 24,3 z M18,0 L21,0 21,3 18,3 z M12,0 L15,0 15,3 12,3 z M6,0 L9,0 9,3 6,3 z M0,0 L3,0 3,3 0,3 z" Fill="{TemplateBinding Foreground}" Stretch="Fill" igPrim:XamlHelper.SnapsToDevicePixels="true" />
                                                </Grid>
                                          </Grid>
                                    </Border>
                              </Grid>
                        </ControlTemplate>
                  </Setter.Value>
            </Setter>
      </Style>
      <Style TargetType="igPrim:TileAreaSplitter" BasedOn="{StaticResource TileAreaSplitterStyle}" />
      <!-- *********************************  Tile Style  ********************************* -->
      <Style x:Key="XamTileStyle" TargetType="ig:XamTile">
            <Setter Property="FontSize" Value="12" />
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="Background" Value="{StaticResource TileBackgroundBrush}" />
            <Setter Property="BorderBrush" Value="{StaticResource TileBorderBrush}" />
            <Setter Property="Foreground" Value="{StaticResource DarkForegroundBrush}" />
            <Setter Property="BorderThickness" Value="1" />
            <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}" />
      <!-- *********************************  TileDragIndicator Style  ********************************* -->
      <Style x:Key="TileDragIndicatorStyle" TargetType="igPrim:TileDragIndicator">
            <Setter Property="Template">
                  <Setter.Value>
                        <ControlTemplate TargetType="igPrim:TileDragIndicator">
                              <Border Background="{TemplateBinding Background}">
                                    <ContentPresenter />
                              </Border>
                        </ControlTemplate>
                  </Setter.Value>
            </Setter>
      </Style>
      <Style TargetType="igPrim:TileDragIndicator" BasedOn="{StaticResource TileDragIndicatorStyle}" />
      <!-- *********************************  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>

Topics

The following topic provides additional information related to this topic.

Topic Purpose

This topic describes how to create a new custom control theme using Infragistics ThemeManager .