टैब नियंत्रण के उस टैब के नीचे लाइन से छुटकारा पाएं

Question

xaml (wpf) का उपयोग करके मैं नीचे "चित्रण ए" में दिखाए गए टैब नियंत्रण के नीचे रेखा से छुटकारा पाने की कोशिश कर रहा हूं ताकि यह दिखने लगे "चित्रण बी ':

चित्रण एक

http://www.arulerforwindows.com/images/peskylinea.png

चित्रण बी

http://www.arulerforwindows.com/images/peskylineb.png

गु ई लाइन तब दिखाई देती है जब मैं टैब आइटम को परिभाषित करता हूं लेकिन टैब नियंत्रण से जुड़ा हुआ प्रतीत होता है, जिसके परिणामस्वरूप या तो टैब आइटम या टैब कंट्रोल दोनों पर सीमाबद्धता बदलती है, वांछित परिणाम उत्पन्न नहीं होता है।

मुझे इसे एक पारदर्शी पृष्ठभूमि पर करने की आवश्यकता है जहां समस्या को मुखौटा करने के लिए एक ठोस भरने आयत का उपयोग नहीं किया जा सकता है।

कोड यह रहा:

<!--Tab Control--> 
<Style TargetType="{x:Type TabControl}"> 
    <Setter Property="OverridesDefaultStyle" Value="True" /> 
    <Setter Property="SnapsToDevicePixels" Value="True" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabControl}"> 
       <Grid KeyboardNavigation.TabNavigation="Local"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto"/> 
         <RowDefinition Height="*"/> 
        </Grid.RowDefinitions> 
        <TabPanel Name="HeaderPanel" Grid.Row="0" Panel.ZIndex="1" Margin="0,0,0,-1" IsItemsHost="True" KeyboardNavigation.TabIndex="1" Background="Transparent" /> 
        <Border 
         Name="Border" 
         Grid.Row="1" 
         Background="{StaticResource WindowBackgroundBrush}" 
         BorderBrush="{StaticResource DefaultSystemBrush}" 
         BorderThickness="1,1,1,1" 
         Margin="0,0,0,0" 
         CornerRadius="4" 
         KeyboardNavigation.TabNavigation="Local" 
         KeyboardNavigation.DirectionalNavigation="Contained" 
         KeyboardNavigation.TabIndex="2" > 
         <ContentPresenter 
          Name="PART_SelectedContentHost" 
          Margin="4" 
          ContentSource="SelectedContent" /> 
        </Border>           
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsEnabled" Value="False"> 
         <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" /> 
         <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" /> 
        </Trigger> 
     <Trigger Property="IsEnabled" Value="False"> 
      <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" /> 
      <Setter Property="BorderBrush" TargetName="Border" Value="{StaticResource DisabledBorderBrush}" /> 
     </Trigger> 
     </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style TargetType="{x:Type TabItem}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabItem}"> 
       <Grid> 
        <Border Name="Border" Background="Transparent" BorderBrush="{StaticResource DefaultSystemBrush}" BorderThickness="1,1,1,1" CornerRadius="6,6,0,0"> 
         <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"/> 
        </Border> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsSelected" Value="True"> 
         <Setter Property="Panel.ZIndex" Value="100" /> 
         <Setter TargetName="Border" Property="Background" Value="Transparent" /> 
         <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" /> 
        </Trigger> 
        <Trigger Property="IsSelected" Value="False"> 
         <Setter TargetName="Border" Property="Background" Value="LightGray" /> 
         <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

अग्रिम धन्यवाद,

रोब

Answer 1

ShowMeTheTemplate का उपयोग करते हुए मैं शैली का हिस्सा पता चला, यह TabItem पर है। यदि आप इसे ओवरराइड करते हैं तो सेटिंग में रुचि रखने वाले डिफ़ॉल्ट नियंत्रण टेम्पलेट में बहुत कुछ है।

<MultiTrigger> 
    <MultiTrigger.Conditions> 
    <Condition Property="Selector.IsSelected"> 
     <Condition.Value> 
     <s:Boolean>True</s:Boolean> 
     </Condition.Value> 
    </Condition> 
    <Condition Property="TabItem.TabStripPlacement" Value="{x:Static Dock.Top}" /> 
    </MultiTrigger.Conditions> 
    <Setter Property="FrameworkElement.Margin"> 
    <Setter.Value> 
     <Thickness>-2,-2,-2,-1</Thickness> 
    </Setter.Value> 
    </Setter> 
</MultiTrigger> 

Answer 2

यह ठीक काम करता है।

<Style TargetType="TabItem"> 
    <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabItem}"> 
       <Border x:Name="Chrome" 
         BorderThickness="1,1,1,0" 
         BorderBrush="Black" 
         Background="{TemplateBinding Background}" 
         Padding="2,2,2,1" Margin="1,1,1,0"> 
        <ContentPresenter ContentSource="Header" 
         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="Selector.IsSelected" Value="True"> 
         <Setter TargetName="Chrome" Property="Margin" Value="1,1,1,-1"/> 
         <Setter TargetName="Chrome" Property="Padding" Value="2"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

बस चयनित टैब आइटम पर मार्जिन और पैडिंग बदलें।

Answer 3

मार्जिन और पैडिंग समायोजित करना मेरे लिए अच्छा काम नहीं करता है। तथापि था टैब नियंत्रण सीमा पर एक सफेद (पृष्ठभूमि रंग) सीमा आकर्षित चाल:

<ControlTemplate TargetType="{x:Type TabItem}"> 
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0 0 7 0"> 
     <Border x:Name="tabContentBorder" BorderThickness="2 2 2 0" Background="AliceBlue" BorderBrush="AliceBlue" CornerRadius="6 6 0 0"> 
     <ContentPresenter HorizontalAlignment="Center" x:Name="Content" VerticalAlignment="Center" ContentSource="Header" Margin="7 3 7 3"/> 
    </Border> 
    <Border x:Name="tabBottomBorder" BorderBrush="White" BorderThickness="1" Visibility="Hidden" Margin="2 0 2 -2" HorizontalAlignment="Stretch"></Border> 
</StackPanel> 
<ControlTemplate.Triggers> 
    <Trigger Property="IsSelected" Value="True"> 
     <Setter TargetName="tabContentBorder" Property="Background" Value="White" /> 
     <Setter TargetName="tabBottomBorder" Property="Visibility" Value="Visible"/> 
    </Trigger> 
</ControlTemplate.Triggers> 

Answer 4

एक ही समस्या थी। नोट किया गया है कि यह लाइन केवल ऊंचाई सेट वाले टैब के लिए खींची गई है (यह केवल एक टैब के लिए सेट है और स्वचालित रूप से सभी टैबों की बचत ऊंचाई होती है)। इसलिए मैंने को width=0 और height के साथ जोड़ा है और अन्य सभी टैबों से height को हटा दिया है और इसने मेरे लिए चाल बनाई है।

Answer 5

<Style TargetType="TabControl"> 
     <Setter Property="Template"> 
      <Setter.Value> 

       <ControlTemplate TargetType="{x:Type TabControl}"> 
        <Grid KeyboardNavigation.TabNavigation="Local"> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto" /> 
          <RowDefinition Height="*" /> 
         </Grid.RowDefinitions> 

         <TabPanel x:Name="HeaderPanel" 
           Grid.Row="0" 
           Panel.ZIndex="1" 
           Margin="0,0,0,-1" 
           IsItemsHost="True" 
           KeyboardNavigation.TabIndex="1" 
           Background="Transparent" /> 

         <Border x:Name="Border" 
          Grid.Row="1" 
          BorderThickness="1" 
          KeyboardNavigation.TabNavigation="Local" 
          KeyboardNavigation.DirectionalNavigation="Contained" 
          KeyboardNavigation.TabIndex="2"> 

          <Border.Background> 
           <SolidColorBrush Color="White"/> 
          </Border.Background> 

          <Border.BorderBrush> 
           <SolidColorBrush Color="White"/> 
          </Border.BorderBrush> 

          <ContentPresenter x:Name="PART_SelectedContentHost" 
              Margin="0" 
              ContentSource="SelectedContent" /> 
         </Border> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     </Style> 

Answer 6

एक और बहुत आसान तरीका सिर्फ शून्य चौड़ाई के साथ एक अतिरिक्त टैब जोड़ने के लिए आप, आप क्या चाहते करने के लिए ऊंचाई सेट कर सकते हैं या यहां तक ​​कि बस इसे दृश्यता छिपा है बनाने जहां है। फिर आप उस टैब पर कष्टप्रद क्षैतिज रेखा के बिना टैब ऊंचाई सेट कर सकते हैं जहां आप ऊंचाई निर्धारित करते हैं।

  <TabItem Header="" Width="0" Height="30" Visibility="Hidden" />