Für ein Projekt hab ich ein an den Office 2010 Optionen Dialog (siehe Bild oben) angepasstes Control benötigt. Leider gibt es kein fertiges Control direkt von Microsoft. Jedoch handelt es sich meiner Meinung nach hierbei um ein einfaches TabControl, welches im Style entsprechend angepasst wurde. Dank WPF ist dies auch kein Problem. Mein Ergebnis sieht folgendermaßen aus:
Der XAML-Code für das komplette Window mit den ensprechenden Styles:
<Window x:Class="WpfTabControl.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" Background="#eeeeee"> <Window.Resources> <!-- TabControl --> <Style TargetType="{x:Type TabControl}" x:Key="TabControlOfficeStyle"> <Setter Property="TabStripPlacement" Value="Left" /> <Setter Property="ItemContainerStyle" Value="{DynamicResource TabItemOfficeStyle}" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabControl}"> <Grid ClipToBounds="True" SnapsToDevicePixels="True" KeyboardNavigation.TabNavigation="Local"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Border Grid.Column="0" Margin="5" Grid.Row="0" Background="White" BorderBrush="#828790" BorderThickness="1" Padding="2"> <TabPanel x:Name="HeaderPanel" IsItemsHost="True" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1" /> </Border> <Border x:Name="ContentPanel" BorderBrush="#828790" BorderThickness="1" Background="White" Grid.Column="1" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="0" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local" VerticalAlignment="Stretch" Margin="0,5,5,5" Padding="5,0"> <ContentPresenter x:Name="PART_SelectedContentHost" ContentTemplate="{TemplateBinding SelectedContentTemplate}" Content="{TemplateBinding SelectedContent}" ContentStringFormat="{TemplateBinding SelectedContentStringFormat}" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> </Border> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <!-- TabItem Style --> <Style x:Key="TabItemOfficeStyle" TargetType="{x:Type TabItem}"> <Setter Property="Foreground" Value="Black"/> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Setter Property="VerticalContentAlignment" Value="Stretch"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabItem}"> <Grid SnapsToDevicePixels="true"> <Border x:Name="Bd" CornerRadius="5" Padding="10,4" Height="25" Margin="0,1" BorderThickness="1"> <ContentPresenter x:Name="Content" ContentSource="Header" HorizontalAlignment="Left" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" TextBlock.FontSize="11" /> </Border> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter Property="BorderBrush" TargetName="Bd" Value="#f7d84b" /> <Setter Property="Background" TargetName="Bd"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="#fdeeb3" Offset="0.0" /> <GradientStop Color="#fde48a" Offset="0.5" /> <GradientStop Color="#fdf8de" Offset="1.0" /> </LinearGradientBrush> </Setter.Value> </Setter> </Trigger> <Trigger Property="IsSelected" Value="true"> <Setter Property="Background" TargetName="Bd"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="#ffe575" Offset="0.0" /> <GradientStop Color="#ffd96c" Offset="0.5" /> <GradientStop Color="#fff480" Offset="1.0" /> </LinearGradientBrush> </Setter.Value> </Setter> <Setter TargetName="Bd" Property="BorderBrush"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="#C2762B" Offset="0.0" /> <GradientStop Color="#C29E47" Offset="1.0" /> </LinearGradientBrush> </Setter.Value> </Setter> <Setter TargetName="Bd" Property="BorderThickness" Value="1" /> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <Grid> <TabControl Style="{DynamicResource TabControlOfficeStyle}"> <TabItem Header="Allgemein"><TextBlock Text="Text" /></TabItem> <TabItem Header="E-Mail"><TextBlock Text="Text" /></TabItem> <TabItem Header="Kalender"><TextBlock Text="Text" /></TabItem> <TabItem Header="Aufgaben"><TextBlock Text="Text" /></TabItem> <TabItem Header="Notizen und Journal"><TextBlock Text="Text" /></TabItem> </TabControl> </Grid> </Window>
Das Template lehnt sich nicht zu 100% an das Original an. Gerade bei den Verläufen gibt es einige kleinere Abweichungen. Auch ist das Template an sich nicht perfekt. Es wurden viele feste und statische Werte genommen, so dass es sich nur bedingt als allgemeines Control eigent. Gerade bei Größenangaben und Farbewerten könnte man hier viel mehr mit Bindung arbeiten.
{ 0 Kommentare } { 0 Shares }