2011-10-10 50 views
1

樣式大師,我需要幫助提供一個Expander樣式,看起來像在Visual Studio的代碼編輯器中找到的樣式。到目前爲止,我已經拿出這個WPF Expander按鈕風格,帶+和 -

<ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButton">    
       <Border 
        SnapsToDevicePixels="true" 
        Height="12" 
        Name="Border" 
        CornerRadius="0"     
        Margin="2,4" 
        Background="Transparent"      
        BorderBrush="Black"      
        BorderThickness="0.5" >     
       <TextBlock Name="Arrow" Text="+" 
          Foreground="{StaticResource GlyphBrush}" 
          HorizontalAlignment="Center" VerticalAlignment="Center" /> 
      </Border> 
       <ControlTemplate.Triggers>     
       <Trigger Property="IsChecked" Value="true">      
        <Setter TargetName="Arrow" Property="Text" Value="-" /> 
       </Trigger>     
      </ControlTemplate.Triggers> 
     </ControlTemplate> 

它看起來像這樣在摺疊狀態。

enter image description here

它顯然需要一些微調,這正是我需要幫助。我的挑戰是獲得正確的按鈕內容和垂直對齊。在附圖中,擴展器只是被添加到停靠面板,所以我不明白爲什麼按鈕內容不按照指定居中。

TIA。

回答

4

這是我使用的一種風格。

<Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton"> 
    <Setter Property="Focusable" Value="False"/> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="ToggleButton"> 
      <Grid Width="14" Height="14"> 
       <Rectangle Fill="{DynamicResource primaryBackgroundBrush}" /> 
       <Border Name="ExpandBorder" RenderOptions.EdgeMode="Aliased" BorderBrush="Black" BorderThickness="2"> 
        <Path RenderOptions.EdgeMode="Aliased" Name="ExpandPath" Stroke="Black" Margin="0" StrokeThickness="2" Data="M 5 1 L 5 9 M 1 5 L 9 5" /> 
       </Border> 
      </Grid> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsChecked" Value="True"> 
        <Setter Property="Data" TargetName="ExpandPath" Value="M 1 5 L 9 5"/> 
       </Trigger> 
       <Trigger Property="IsEnabled" Value="False"> 
        <Setter TargetName="ExpandBorder" Property="BorderBrush" Value="Gray" /> 
        <Setter TargetName="ExpandPath" Property="Stroke" Value="Gray" /> 
        <Setter Property="Data" TargetName="ExpandPath" Value=""/> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Setter.Value> 
</Setter> 

+0

感謝您分享您的模板。 primaryBackgrounBrush由什麼組成? –

+1

這是根據用戶主題設置的動態資源。現在看看它,我意識到可以將其移動到控件的邊框背景中。 – Brady

+1

很好,謝謝。然而,它有一些小問題,例如,如果將邊框和矩形的厚度減少到1,則矩形不再以網格爲中心。 –