Beispiel für ein Frame-ControlTemplate
Aktualisiert: November 2007
Steuerelemente in Windows Presentation Foundation (WPF) verfügen über ein ControlTemplate-Element, das die visuelle Struktur des Steuerelements enthält. Sie können die Struktur und die Darstellung eines Steuerelements ändern, indem Sie das ControlTemplate dieses Steuerelements ändern. Es gibt keine Möglichkeit, nur Teile der visuellen Struktur eines Steuerelements zu ersetzen. Um die visuelle Struktur eines Steuerelements zu ändern, muss die Template-Eigenschaft des Steuerelements auf dessen neues und vollständiges ControlTemplate festgelegt werden.
In diesem Thema wird das ControlTemplate des WPF-Frame-Steuerelements veranschaulicht.
Dieses Thema enthält folgende Abschnitte.
- Vorbereitungsmaßnahmen
- Beispiel für ein Frame-ControlTemplate
- Verwandte Abschnitte
Vorbereitungsmaßnahmen
Um die Beispiele in diesem Thema ausführen zu können, sollten Sie wissen, wie WPF-Anwendungen geschrieben werden. Weitere Informationen finden Sie unter Erste Schritte mit Windows Presentation Foundation. Sie sollten ebenfalls mit der Verwendung von Stilen in WPF vertraut sein. Weitere Informationen finden Sie unter Erstellen von Formaten und Vorlagen.
Beispiel für ein Frame-ControlTemplate
Obwohl in diesem Beispiel alle Elemente enthalten sind, die im ControlTemplate eines Frame standardmäßig definiert werden, sind die spezifischen Werte nur als Beispiele zu verstehen.
<!-- Back/Forward Button Style -->
<Style x:Key="FrameButtonStyle" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Command" Value="NavigationCommands.BrowseBack"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse
Name="Ellipse"
Fill="{StaticResource NormalBrush}"
Stroke="{StaticResource NormalBorderBrush}"
StrokeThickness="1"
Width="16"
Height="16"/>
<Path
x:Name="Arrow"
Margin="0,0,2,0"
Fill="{StaticResource GlyphBrush}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 4 0 L 0 4 L 4 8 Z"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Command"
Value="{x:Static NavigationCommands.BrowseForward}">
<Setter TargetName="Arrow" Property="Data"
Value="M 0 0 L 4 4 L 0 8 z"/>
<Setter TargetName="Arrow" Property="Margin" Value="2,0,0,0"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Ellipse" Property="Fill"
Value="{StaticResource DarkBrush}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Ellipse" Property="Fill"
Value="{StaticResource PressedBrush}" />
<Setter TargetName="Ellipse" Property="Stroke"
Value="{StaticResource PressedBorderBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Ellipse" Property="Fill"
Value="{StaticResource DisabledBackgroundBrush}"/>
<Setter TargetName="Arrow" Property="Fill"
Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Frame Menu Style -->
<Style x:Key="FrameMenu" TargetType="Menu">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="IsMainMenu" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Menu">
<DockPanel IsItemsHost="true"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Frame Menu Header Style -->
<Style x:Key="FrameHeaderMenuItem" TargetType="MenuItem">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuItem">
<Grid>
<Popup x:Name="PART_Popup"
Placement="Bottom"
VerticalOffset="2"
IsOpen="{TemplateBinding IsSubmenuOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Fade">
<Border Name="SubMenuBorder"
Background="{StaticResource WindowBackgroundBrush}"
BorderThickness="1"
BorderBrush="{StaticResource SolidBorderBrush}">
<StackPanel IsItemsHost="true"
Margin="2"
KeyboardNavigation.TabNavigation="Cycle"
KeyboardNavigation.DirectionalNavigation="Cycle"/>
</Border>
</Popup>
<Grid x:Name="Panel"
Width="24"
Background="Transparent"
HorizontalAlignment="Right" >
<Border Visibility="Hidden"
Name="HighlightBorder"
BorderThickness="1"
BorderBrush="{StaticResource NormalBorderBrush}"
Background="{StaticResource NormalBrush}"
CornerRadius="2" />
<Path x:Name="Arrow"
SnapsToDevicePixels="false"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,2,4,0"
Fill="{StaticResource GlyphBrush}"
StrokeLineJoin="Round"
Data="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="HighlightBorder"
Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="IsSubmenuOpen" Value="true">
<Setter TargetName="HighlightBorder"
Property="Background" Value="{StaticResource PressedBrush}" />
<Setter TargetName="HighlightBorder"
Property="BorderBrush" Value="{StaticResource PressedBorderBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Arrow"
Property="Fill" Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Frame Menu Item Style -->
<Style x:Key="FrameSubmenuItem" TargetType="MenuItem">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Header" Value="{Binding Path=(JournalEntry.Name)}"/>
<Setter Property="Command" Value="NavigationCommands.NavigateJournal"/>
<Setter Property="CommandTarget"
Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type Menu}},
Path=TemplatedParent}"/>
<Setter Property="CommandParameter"
Value="{Binding RelativeSource={RelativeSource Self}}"/>
<Setter Property="JournalEntryUnifiedViewConverter.JournalEntryPosition"
Value="{Binding (JournalEntryUnifiedViewConverter.JournalEntryPosition)}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuItem">
<Grid Name="Panel"
Background="Transparent"
SnapsToDevicePixels="true">
<Path Name="Glyph"
SnapsToDevicePixels="false"
Margin="7,5"
Width="10"
Height="10"
HorizontalAlignment="Left"
StrokeStartLineCap="Triangle"
StrokeEndLineCap="Triangle"
StrokeThickness="2"
Stroke="{StaticResource GlyphBrush}" />
<ContentPresenter ContentSource="Header"
Margin="24,5,50,5"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="JournalEntryUnifiedViewConverter.JournalEntryPosition"
Value="Current">
<Setter TargetName="Glyph"
Property="Data" Value="M 0,5 L 2.5,8 L 7,3 "/>
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Panel" Property="Background"
Value="{StaticResource SelectedBackgroundBrush}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="MenuItem.IsHighlighted" Value="true"/>
<Condition Property="JournalEntryUnifiedViewConverter.JournalEntryPosition"
Value="Forward"/>
</MultiTrigger.Conditions>
<Setter TargetName="Glyph" Property="Data" Value="M 3 1 L 7 5 L 3 9 z"/>
<Setter TargetName="Glyph" Property="Fill" Value="{StaticResource GlyphBrush}"/>
<Setter TargetName="Glyph" Property="Stroke" Value="{x:Null}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="MenuItem.IsHighlighted" Value="true"/>
<Condition Property="JournalEntryUnifiedViewConverter.JournalEntryPosition"
Value="Back"/>
</MultiTrigger.Conditions>
<Setter TargetName="Glyph" Property="Data" Value="M 7 1 L 3 5 L 7 9 z"/>
<Setter TargetName="Glyph" Property="Fill" Value="{StaticResource GlyphBrush}"/>
<Setter TargetName="Glyph" Property="Stroke" Value="{x:Null}"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Merges Back and Forward Navigation Stacks -->
<JournalEntryUnifiedViewConverter x:Key="JournalEntryUnifiedViewConverter"/>
<!-- SimpleStyles: Frame -->
<Style x:Key="{x:Type Frame}" TargetType="Frame">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Frame">
<DockPanel>
<Grid Background="{StaticResource LightBrush}"
DockPanel.Dock="Top"
Height="22">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="16"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Menu Name="NavMenu"
Grid.ColumnSpan="3"
Height="16"
Margin="1,0,0,0"
VerticalAlignment="Center"
Style="{StaticResource FrameMenu}">
<MenuItem Style="{StaticResource FrameHeaderMenuItem}"
ItemContainerStyle="{StaticResource FrameSubmenuItem}"
IsSubmenuOpen="{Binding Path=(MenuItem.IsSubmenuOpen),Mode=TwoWay,
RelativeSource={RelativeSource TemplatedParent}}">
<MenuItem.ItemsSource>
<MultiBinding Converter="{StaticResource JournalEntryUnifiedViewConverter}">
<MultiBinding.Bindings>
<Binding RelativeSource="{RelativeSource TemplatedParent}"
Path="BackStack" />
<Binding RelativeSource="{RelativeSource TemplatedParent}"
Path="ForwardStack" />
</MultiBinding.Bindings>
</MultiBinding>
</MenuItem.ItemsSource>
</MenuItem>
</Menu>
<Path Grid.Column="0"
SnapsToDevicePixels="false"
IsHitTestVisible="false"
Margin="2,0,0,0"
Grid.ColumnSpan="3"
StrokeThickness="1"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Data="M15,14 Q18,12.9 20.9,14 A8.3,8.3,0,0,0,35.7,8.7 A8.3,8.3,0,0,0,25.2,0.6 Q18,
3.3 10.8,0.6 A8.3,8.3,0,0,0,0.3,8.7 A8.3,8.3,0,0,0,15,14 z"
Fill="{StaticResource PressedBrush}"
Stroke="{StaticResource LightBorderBrush}"/>
<Button Style="{StaticResource FrameButtonStyle}"
Command="NavigationCommands.BrowseBack"
Content="M 4 0 L 0 4 L 4 8 Z"
Margin="2.7,0,1.3,0"
Grid.Column="0"/>
<Button Style="{StaticResource FrameButtonStyle}"
Command="NavigationCommands.BrowseForward"
Content="M 4 0 L 0 4 L 4 8 Z"
Margin="1.3,0,0,0"
Grid.Column="1"/>
</Grid>
<ContentPresenter x:Name="PART_FrameCP"/>
</DockPanel>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="CanGoForward" Value="false"/>
<Condition Property="CanGoBack" Value="false"/>
</MultiTrigger.Conditions>
<Setter TargetName="NavMenu" Property="IsEnabled" Value="false"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Im vorherigen Beispiel werden eine oder mehrere der folgenden Ressourcen angewendet.
<!-- Fill Brushes -->
<LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#CCC" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HorizontalNormalBrush" StartPoint="0,0" EndPoint="1,0">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#CCC" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HorizontalLightBrush" StartPoint="0,0" EndPoint="1,0">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DarkBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#AAA" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#BBB" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="0.1"/>
<GradientStop Color="#EEE" Offset="0.9"/>
<GradientStop Color="#FFF" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" />
<!-- Border Brushes -->
<LinearGradientBrush x:Key="NormalBorderBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#CCC" Offset="0.0"/>
<GradientStop Color="#444" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HorizontalNormalBorderBrush" StartPoint="0,0" EndPoint="1,0">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#CCC" Offset="0.0"/>
<GradientStop Color="#444" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultedBorderBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#777" Offset="0.0"/>
<GradientStop Color="#000" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="PressedBorderBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#444" Offset="0.0"/>
<GradientStop Color="#888" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
<SolidColorBrush x:Key="LightBorderBrush" Color="#AAA" />
<!-- Miscellaneous Brushes -->
<SolidColorBrush x:Key="GlyphBrush" Color="#444" />
<SolidColorBrush x:Key="LightColorBrush" Color="#DDD" />
Das vollständige Beispiel finden Sie unter Beispiel zum Formatieren mit ControlTemplates.
Siehe auch
Konzepte
Richtlinien zum Entwerfen formatierbarer Steuerelemente