此範例示範如何在資源中建立焦點視覺樣式,並使用 FocusVisualStyle 屬性將該樣式套用至控制項。
範例
下列範例會定義一種樣式,可建立額外的控制項組合,只有在該控制項於使用者介面 (UI) 以鍵盤對焦時才適用。 這是藉由使用 ControlTemplate 定義樣式,然後在設定 FocusVisualStyle 屬性時將該樣式作為資源參考來完成。
與框線相同的外部矩形位於矩形區域外。 除非另有修改,否則樣式的大小會使用矩形控制項 (套用焦點視覺樣式) 的 ActualHeight 和 ActualWidth。 本範例會設定 Margin 的負值,讓框線稍微出現在對焦控制項之外。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Page.Resources>
<Style x:Key="MyFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="-2" StrokeThickness="1" Stroke="Red" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<StackPanel Background="Ivory" Orientation="Horizontal">
<Canvas Width="10"/>
<Button Width="100" Height="30" FocusVisualStyle="{DynamicResource MyFocusVisual}">
Focus Here</Button>
<Canvas Width="100"/>
<Button Width="100" Height="30" FocusVisualStyle="{DynamicResource MyFocusVisual}">
Focus Here</Button>
</StackPanel>
</Page>
FocusVisualStyle 對於來自明確樣式或佈景主題樣式的任何控制項範本樣式是可供附加的;您仍然可以使用 ControlTemplate 和將該樣式設為 Style 屬性來建立控制項的主要樣式。
焦點視覺樣式應該一致地用於佈景主題或 UI,而不是針對每個可設定焦點元素使用不同的樣式。 如需詳細資料,請參閱設定控制項中焦點的樣式和 FocusVisualStyle。