XamOutlookBar Style 적용
C#에서 Infragistics OutlookBar를 사용하면 background색깔을 바꿀수가 없다.
이경우 스타일을 입혀줘서 변경해야 한다.
기본적으로 아래 소스가 적용 되어야 한다.
xmlns:converters="clr-namespace:Infragistics.Samples.Shared.Converters;assembly=Infragistics.Samples.Shared"
xmlns:UserControl="clr-namespace:Infragistics.Samples.Framework;assembly=Infragistics.Samples.Framework"
xmlns:igPrim="http://schemas.infragistics.com/xaml/primitives"
xmlns:res="clr-namespace:IGOutlookBar.Resources"
Style 소스는 아래와 같다.
전체를 분석 하진 못했다. 차후에 업데이트 해야지;; 주석으로 색깔변경과 각 헤더, 하단, 부분의 스타일 적용부분을 적어 놓았다.
<UserControl.Resources>
<ResourceDictionary>
<RadialGradientBrush x:Key="ContentAreaBg" Center="0.500,0.5" GradientOrigin="0.500,0.5" RadiusX="0.500" RadiusY="0.500">
<RadialGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0" Color="Red"/>
<GradientStop Offset="1" Color="Red"/>
</GradientStopCollection>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
<!-- 아이템 글자색-->
<SolidColorBrush x:Key="NavigationGroupHeaderNormalTextFillKey" Color="#FFFFFF"/>
<SolidColorBrush x:Key="NavigationGroupHeaderHottrackTextFillKey" Color="Black"/>
<SolidColorBrush x:Key="NavigationGroupHeaderActiveTextFillKey" Color="Pink"/>
<SolidColorBrush x:Key="NavigationGroupHeaderNormalCenterFillKey" Color="Pink"/>
<SolidColorBrush x:Key="NavigationGroupHeaderHottrackCenterFillKey" Color="Pink"/>
<SolidColorBrush x:Key="NavigationGroupHeaderPressedCenterFillKey" Color="Pink"/>
<SolidColorBrush x:Key="NavigationGroupHeaderActiveHottrackCenterFillKey" Color="Pink"/>
<!-- 선택 되었을때 배경색-->
<SolidColorBrush x:Key="NavigationGroupHeaderActiveCenterFillKey" Color="Pink"/>
<SolidColorBrush x:Key="NavigationGroupHeaderInnerStrokeFillKey" Color="Pink"/>
<SolidColorBrush x:Key="NavigationGroupHeaderFocusFillKey" Color="Black"/>
<Style x:Key="OBGroupStyle" TargetType="ig:OutlookBarGroup">
<Setter Property="Background" Value="#FF454343"/>
<Setter Property="Foreground" Value="#FF454343" />
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontFamily" Value="/Infragistics.Web.SampleBrowser.SilverlightLOB;component/Fonts/SEGOEUI.TTF#Segoe UI"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ig:OutlookBarGroup">
<!-- 선택 되지 않았을때 배경-->
<Border
x:Name="RootBorder"
Margin="0,0,0,1"
Background="#FF454343"
BorderBrush="#FF454343"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOverGroup">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00" Storyboard.TargetName="BackgroundBorder" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{StaticResource ContentAreaBg}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.001"
Storyboard.TargetName="BackgroundBorder"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{StaticResource NavigationGroupHeaderActiveCenterFillKey}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00" Storyboard.TargetName="BackgroundBorder" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{StaticResource ContentAreaBg}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="IconAndHeaderStates">
<VisualState x:Name="IconAndHeader"/>
<VisualState x:Name="LargeIconOnly">
<Storyboard>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.001"
Storyboard.TargetName="Header"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.001"
Storyboard.TargetName="SmallIconControl"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.001"
Storyboard.TargetName="LargeIconControl"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SmallIconOnly">
<Storyboard>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.001"
Storyboard.TargetName="Header"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.001"
Storyboard.TargetName="expandGlyph"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.001"
Storyboard.TargetName="dotRule"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.001"
Storyboard.TargetName="SmallIconControl"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.001"
Storyboard.TargetName="LargeIconControl"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="LargeIconSpaceStates">
<VisualState x:Name="ReserveSpace"/>
<VisualState x:Name="NoSpace">
<Storyboard>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.001"
Storyboard.TargetName="ImageColumn"
Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Border x:Name="BackgroundBorder" Background="Transparent"/>
<Grid Margin="{TemplateBinding Padding}">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ImageColumn" Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentControl
x:Name="SmallIconControl"
Width="16"
Height="16"
Grid.Column="0"
Margin="4,7,5,7"
Content="{Binding}"
ContentTemplate="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SmallIconTemplateResolved}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Visibility="Collapsed"/>
<ContentControl
x:Name="LargeIconControl"
Width="24"
Height="24"
Grid.Column="0"
Margin="4,4,5,2"
Content="{Binding}"
ContentTemplate="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=LargeIconTemplateResolved}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"/>
<ContentControl
x:Name="Header"
Grid.Column="1"
Margin="4,0,2,1"
VerticalAlignment="Center"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
FontWeight="Bold"
Foreground="{StaticResource NavigationGroupHeaderNormalTextFillKey}"/>
<Rectangle
x:Name="dotRule"
Height="1"
Grid.ColumnSpan="2"
VerticalAlignment="Bottom"
Stroke="#FF454343"
StrokeDashArray="2"/>
<Path
x:Name="expandGlyph"
Width="6"
Height="6"
Grid.Column="1"
HorizontalAlignment="Right"
Margin="0,5,5,0"
VerticalAlignment="Top"
Data="M 2,0 C2,0 2,2 2,2 2,2 0,2 0,2 0,2 0,4 0,4 0,4 2,4 2,4 2,4 2,6 2,6 2,6 4,6 4,6 4,6 4,4 4,4 4,4 6,4 6,4 6,4 6,2 6,2 6,2 4,2 4,2 4,2 4,0 4,0 4,0 2,0 2,0 z"
Fill="#FF454343"/>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- 헤더 Style -->
<Style x:Key="GroupHeaderStyle" TargetType="igPrim:SelectedGroupHeader">
<Setter Property="Background" Value="#FF454343"/>
<Setter Property="BorderBrush" Value="#FF454343"/>
<!-- 글자색-->
<Setter Property="Foreground" Value="#FFFFFF"/>
<Setter Property="Padding" Value="0"/>
</Style>
<Style x:Key="HorizontalSplitterStyleKey" TargetType="Thumb">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid VerticalAlignment="Stretch" Height="6" Background="White">
<Rectangle Height="4" Stroke="#FFFFFF" StrokeDashArray="2" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- 하단스타일 -->
<Style x:Key="overflowStyle" TargetType="igPrim:GroupOverflowArea">
<Setter Property="Background" Value="#FF454343"/>
</Style>
<Style x:Key="OBStyle" TargetType="ig:XamOutlookBar">
<Setter Property="Margin" Value="0"/>
<Setter Property="FontFamily" Value="/Infragistics.Web.SampleBrowser.SilverlightLOB;component/Fonts/SEGOEUI.TTF#Segoe UI"/>
<Setter Property="HorizontalSplitterStyle" Value="{StaticResource HorizontalSplitterStyleKey}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ig:XamOutlookBar">
<Border x:Name="root" VerticalAlignment="Stretch">
<Grid VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border
Grid.Column="1"
VerticalAlignment="Stretch"
Background="#FFFFFF"
BorderBrush="#FFFFFF"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<Grid x:Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" MinHeight="{TemplateBinding SelectedAreaMinHeight}"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" MinHeight="0"/>
</Grid.RowDefinitions>
<StackPanel>
<igPrim:SelectedGroupHeader
x:Name="SelectedGroupHeader"
Height="50"
FontWeight="Bold"
Style="{StaticResource GroupHeaderStyle}"/>
</StackPanel>
<!-- 중앙 Content 스타일 -->
<igPrim:SelectedGroupContent x:Name="SelectedGroupContent" Background="#FF454343" Grid.Row="1"/>
<Thumb
x:Name="Splitter"
Grid.Row="2"
Margin="0,1,0,1"
Background="Transparent"
Cursor="SizeNS"
Style="{TemplateBinding HorizontalSplitterStyle}"/>
<!-- 아이템 스타일 -->
<ItemsControl x:Name="NavigationArea" Grid.Row="3">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Top" Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<!-- 하단 선택 옵션 메뉴-->
<igPrim:GroupOverflowArea x:Name="OverflowArea" Grid.Row="4" Style="{StaticResource overflowStyle}"/>
<Canvas>
<ig:XamDialogWindow
x:Name="NavigationPaneOptionsWindow"
Header="{Binding RelativeSource={RelativeSource Self}, Path=StringsSettings.StringSettings.NavigationPaneOptionsDialogTitle}"
HorizontalContentAlignment="Stretch"
IsResizable="False"
MaximizeButtonVisibility="Collapsed"
MinimizeButtonVisibility="Collapsed"
StartupPosition="Center"
VerticalContentAlignment="Stretch"
WindowState="Hidden">
<igPrim:NavigationPaneOptionsControl/>
</ig:XamDialogWindow>
</Canvas>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</UserControl.Resources>
위 스타일을 아래와 같이 적용하면 된다.
<ig:XamOutlookBar Style="{StaticResource OBStyle}" HorizontalAlignment="Right" Height="978" VerticalAlignment="Top" Width="384" Margin="0">
'Programming Lv1 > WPF + Blend' 카테고리의 다른 글
| WPF 스레드 개체 액세스 문제 Dispatcher.Invoke (1) | 2013.01.30 |
|---|---|
| RadGrideView 항목 수정, ReadOnly (0) | 2013.01.15 |
| XamOutlookbar Group Click Event 적용 (0) | 2012.12.27 |
| XamOutlookBar 레이아웃 변경 Blend (0) | 2012.12.26 |
| WPF ListView Column 사용법 (0) | 2012.12.26 |