2017-07-16 7 views
0

TabItemとエッジの間のスペースを削除する方法を教えてください。Windowまた、タブのコンテンツボックスの周りに境界線があるように見えますが、これは必要ありません。どうすればそれを取り除くことができますか?ここで最初のTabItemとウィンドウの端の間にこの小さなスペースを削除するにはどうすればよいですか?

enter image description here

は私のXAMLです:

<Grid> 
     <TabControl Margin="0" ItemsSource="{Binding TabItems}" SelectedIndex="0"> 
      <TabControl.ItemContainerStyle> 
       <Style TargetType="TabItem"> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <ControlTemplate TargetType="TabItem"> 
           <Grid Name="Panel"> 
            <Border Name="Border" 
              Margin="0,0,-4,0"> 
            </Border> 
            <ContentPresenter x:Name="ContentSite" 
                  VerticalAlignment="Center" 
                  HorizontalAlignment="Center" 
                  ContentSource="Header" 
                  Margin="10,2"/> 
           </Grid> 
           <ControlTemplate.Triggers> 
            <Trigger Property="IsSelected" Value="True"> 
             <Setter TargetName="Panel" Property="Background" Value="Orange" /> 
            </Trigger> 
            <Trigger Property="IsSelected" Value="False"> 
             <Setter TargetName="Panel" Property="Background" Value="LightGray" /> 
            </Trigger> 
           </ControlTemplate.Triggers> 
          </ControlTemplate> 
         </Setter.Value> 
        </Setter> 
        <Setter Property="Header" Value="{Binding Header}"/> 
        <Setter Property="Content" Value="{Binding Content}"/> 
       </Style> 
      </TabControl.ItemContainerStyle> 
     </TabControl> 
    </Grid> 

私は境界線を追加してまで-4マージンを設定しようとしたが、動作していないようです。どんな助けもありがとう。ありがとう! Sテンプレート:

答えて

1

TabControl ' - - この1つは少しトリッキーですタブヘッダに

を調整する、これはTabControlを更新する必要があります

<TabControl Margin="0" 
      ItemsSource="{Binding TabItems}" 
      SelectedIndex="0" 
      BorderThickness="0"> 
    <!--The rest of your code here--> 
</TabControl> 

が更新0秒BorderThicknessプロパティ' を設定します。これは手で行うことができますが、TabControlのテンプレートはかなり大きいので、Blendを使い始めることをお勧めします。 Blendでプロジェクトを開き、 'Objects and Timeline'ウィンドウを開き、TabControlを右クリックし、テンプレートの編集と「コピーの編集」の順にクリックします。これにより、作業を開始するためのデフォルトのTabControlのテンプレートのコピーが作成されます。

enter image description here

これはあなたのためのXAMLのたくさんを作成しようとしています。あなたはブレンドを使用した場合、それが設定されている必要があり、

<Style x:Key="TabControlStyle1" 
     TargetType="{x:Type TabControl}"> 
    <Setter Property="Padding" 
      Value="2" /> 
    <Setter Property="HorizontalContentAlignment" 
      Value="Center" /> 
    <Setter Property="VerticalContentAlignment" 
      Value="Center" /> 
    <Setter Property="Background" 
      Value="{StaticResource TabItem.Selected.Background}" /> 
    <Setter Property="BorderBrush" 
      Value="{StaticResource TabItem.Selected.Border}" /> 
    <Setter Property="BorderThickness" 
      Value="1" /> 
    <Setter Property="Foreground" 
      Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabControl}"> 
       <Grid x:Name="templateRoot" 
         ClipToBounds="true" 
         SnapsToDevicePixels="true" 
         KeyboardNavigation.TabNavigation="Local"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition x:Name="ColumnDefinition0" /> 
         <ColumnDefinition x:Name="ColumnDefinition1" 
              Width="0" /> 
        </Grid.ColumnDefinitions> 
        <Grid.RowDefinitions> 
         <RowDefinition x:Name="RowDefinition0" 
             Height="Auto" /> 
         <RowDefinition x:Name="RowDefinition1" 
             Height="*" /> 
        </Grid.RowDefinitions> 
        <TabPanel x:Name="headerPanel" 
           Background="Transparent" 
           Grid.Column="0" 
           IsItemsHost="true" 
           Margin="2,2,2,0" 
           Grid.Row="0" 
           KeyboardNavigation.TabIndex="1" 
           Panel.ZIndex="1" /> 
        <Border x:Name="contentPanel" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}" 
          Background="{TemplateBinding Background}" 
          Grid.Column="0" 
          KeyboardNavigation.DirectionalNavigation="Contained" 
          Grid.Row="1" 
          KeyboardNavigation.TabIndex="2" 
          KeyboardNavigation.TabNavigation="Local"> 
         <ContentPresenter x:Name="PART_SelectedContentHost" 
              ContentSource="SelectedContent" 
              Margin="{TemplateBinding Padding}" 
              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> 
        </Border> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="TabStripPlacement" 
          Value="Bottom"> 
         <Setter Property="Grid.Row" 
           TargetName="headerPanel" 
           Value="1" /> 
         <Setter Property="Grid.Row" 
           TargetName="contentPanel" 
           Value="0" /> 
         <Setter Property="Height" 
           TargetName="RowDefinition0" 
           Value="*" /> 
         <Setter Property="Height" 
           TargetName="RowDefinition1" 
           Value="Auto" /> 
         <Setter Property="Margin" 
           TargetName="headerPanel" 
           Value="2,0,2,2" /> 
        </Trigger> 
        <Trigger Property="TabStripPlacement" 
          Value="Left"> 
         <Setter Property="Grid.Row" 
           TargetName="headerPanel" 
           Value="0" /> 
         <Setter Property="Grid.Row" 
           TargetName="contentPanel" 
           Value="0" /> 
         <Setter Property="Grid.Column" 
           TargetName="headerPanel" 
           Value="0" /> 
         <Setter Property="Grid.Column" 
           TargetName="contentPanel" 
           Value="1" /> 
         <Setter Property="Width" 
           TargetName="ColumnDefinition0" 
           Value="Auto" /> 
         <Setter Property="Width" 
           TargetName="ColumnDefinition1" 
           Value="*" /> 
         <Setter Property="Height" 
           TargetName="RowDefinition0" 
           Value="*" /> 
         <Setter Property="Height" 
           TargetName="RowDefinition1" 
           Value="0" /> 
         <Setter Property="Margin" 
           TargetName="headerPanel" 
           Value="2,2,0,2" /> 
        </Trigger> 
        <Trigger Property="TabStripPlacement" 
          Value="Right"> 
         <Setter Property="Grid.Row" 
           TargetName="headerPanel" 
           Value="0" /> 
         <Setter Property="Grid.Row" 
           TargetName="contentPanel" 
           Value="0" /> 
         <Setter Property="Grid.Column" 
           TargetName="headerPanel" 
           Value="1" /> 
         <Setter Property="Grid.Column" 
           TargetName="contentPanel" 
           Value="0" /> 
         <Setter Property="Width" 
           TargetName="ColumnDefinition0" 
           Value="*" /> 
         <Setter Property="Width" 
           TargetName="ColumnDefinition1" 
           Value="Auto" /> 
         <Setter Property="Height" 
           TargetName="RowDefinition0" 
           Value="*" /> 
         <Setter Property="Height" 
           TargetName="RowDefinition1" 
           Value="0" /> 
         <Setter Property="Margin" 
           TargetName="headerPanel" 
           Value="0,2,2,2" /> 
        </Trigger> 
        <Trigger Property="IsEnabled" 
          Value="false"> 
         <Setter Property="TextElement.Foreground" 
           TargetName="templateRoot" 
           Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

が名「headerPanel」がTabPanelを見つけ、0最後に一つにその左マージンを設定します。あなたは次のようになりますスタイルのリソースで終わるだろうあなたのTabControlの新しいスタイルを使用するスタイルではなく、場合、あなたはスタイルを自分で設定してください必要があります。

Style="{StaticResource TabControlStyle1}" 

+0

タブコントロールのコンテンツ部分の周囲に境界線を削除します。すばらしいです!最初のタブ項目がエッジから少しずれているという問題もありました。それはどういうわけか調整可能ですか? – konrad

+0

@konrad - 更新された回答を確認してください。 –

関連する問題