2016-04-08 5 views
0

TabControlを作成したかったのですが、すべてのTabItemが同じ一般的な外観を持ちますが、内部に別のアイコンがあります。私のスタイルはすべて外部のリソース辞書にあります。メインウィンドウで私はこのような私のコントロールを宣言しました:スタイルが別のものを継承しない

<TabControl Grid.Row="2" TabStripPlacement="Left" > 
     <TabItem Style="{StaticResource IconDev}"> 
      <Label Content="Content 1" /> 
     </TabItem> 
     <TabItem Style="{StaticResource IconTab}"> 
      <Label Content="Content 2" /> 
     </TabItem> 
    </TabControl 

そして私は2つのスタイルを作成しました。最初のタブ項目の一般的な外観のために、その後、具体的アイコンの:

<Style x:Key="IconTab" TargetType="{x:Type TabItem}"> 
    <Setter Property="MinHeight" Value="70"/> 
    <Setter Property="MaxHeight" Value="70"/> 
    <Setter Property="MinWidth" Value="70"/> 
    <Setter Property="MaxWidth" Value="70"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabItem}"> 
       <Grid> 
        <Border 
         Name="Border" 
         Margin="0,0,-4,0" 
         Background="#FFF" 
         BorderBrush="#FFF" 
         BorderThickness="0" 
         CornerRadius="0" > 
         <ContentPresenter x:Name="ContentSite" 
           VerticalAlignment="Center" 
           HorizontalAlignment="Center" 
           ContentSource="Header" 
           Margin="0" 
           RecognizesAccessKey="True"/> 
        </Border> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsSelected" Value="True"> 
         <Setter Property="Panel.ZIndex" Value="100" /> 
         <Setter TargetName="Border" Property="Background" Value="#000" /> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="False"> 
         <Setter TargetName="Border" Property="Background" Value="#000" /> 
         <Setter TargetName="Border" Property="BorderBrush" Value="#000"/> 
         <Setter Property="Foreground" Value="#000"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
<Style x:Key="IconDev" TargetType="{x:Type TabItem}" BasedOn="{StaticResource IconTab}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate> 
       <TabItem> 
        <TabItem.Header> 
         <StackPanel> 
          <Viewbox Width="50" Height="50"> 
           <Frame Source="icon-dev.xaml" /> 
          </Viewbox> 
         </StackPanel> 
        </TabItem.Header> 
       </TabItem> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Style="{StaticResource IconDev}"はアイコンのみを挿入しかし何かが継承とうまく動作しませんが、それは適用されません。 Style="{StaticResource IconTab}"で宣言された一般的なレイアウト。何が間違っていますか?

+0

'IconDev'がすべき最小/最大サイズ設定を適用します(ベーススタイルから継承します)。また、TabItemのテンプレートをリセット(オーバーライド)します。何が間違っているのですか? – ASh

+0

まず最初に、IconTabからトリガを適用しないで、アイコンの中にデフォルトのタブの外観があります。第二に、それは動作していないようです。クリックするとタブは切り替わりません。しかし、それはあなたの言ったようにサイズが適用されます – przemoo83

+0

'IconDev'テンテレートは' IconTab'で書かれたテンプレートを消去し、トリガーを持っていません。サイズセッターはTemplate setterから独立していて、彼らは働いています – ASh

答えて

2

IconDevは、最小/最大サイズ設定(基本スタイルから継承)を適用する必要があります。また、TabItemのテンプレートをリセット(オーバーライド、消去)します。新しいテンプレートにはトリガがありません。サイズセッターは、テンプレートセッターから独立していると、彼らは、単一のタブの

タブヘッダーの内容ではなく、テンプレートで、外部から変更することができます仕事

例えば両方のTabItemがIconTabのスタイルを使用し、最初のタブには、複雑なヘッダーの内容

<TabControl TabStripPlacement="Left" > 
    <TabItem Style="{StaticResource IconTab}"> 
     <!--Label is a tab content--> 
     <Label Content="Content 1" /> 

     <TabItem.Header> 
      <StackPanel> 
       <Viewbox Width="50" Height="50"> 
        <Frame Source="icon-dev.xaml" /> 
       </Viewbox> 
      </StackPanel> 
     </TabItem.Header> 
    </TabItem> 

    <TabItem Style="{StaticResource IconTab}" Header="Text"> 
     <Label Content="Content 2" /> 
    </TabItem> 
</TabControl> 
があり

更新:派生スタイルテンプレートを上書きせずにヘッダのみを変更することができます

<Style x:Key="IconDev" TargetType="{x:Type TabItem}" BasedOn="{StaticResource IconTab}"> 
    <Setter Property="Header"> 
     <Setter.Value> 
       <StackPanel> 
        <Viewbox Width="50" Height="50"> 
         <Frame Source="icon-dev.xaml" /> 
        </Viewbox> 
       </StackPanel> 
     </Setter.Value> 
    </Setter> 
</Style> 
<TabControl TabStripPlacement="Left" > 
    <TabItem Style="{StaticResource IconDev}"> 
     <Label Content="Content 1" />     
    </TabItem> 
    <TabItem Style="{StaticResource IconTab}" Header="Text"> 
     <Label Content="Content 2" /> 
    </TabItem> 
</TabControl> 
+0

これは私が最初にやった方法でしたが、より洗練されたものにして、外部のスタイルファイルですべてをやりたかったのです。ありがとう – przemoo83

+0

@ przemoo83、私の更新を確認してください。 – ASh

+0

あなたは、このメカニズムがどのように働くかを理解し始めている大きな助けとなりました。 – przemoo83

関連する問題