的TabControl - 正確對齊的TabItems如果自由空間主導

我有一個自定義的TabControl：的TabControl - 正確對齊的TabItems如果自由空間主導

<Window x:Class="WpfApplication2.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 

    <Window.Resources> 
     <Style TargetType="TabControl"> 
     <Setter Property="Background" Value="Transparent" /> 
     <Setter Property="BorderThickness" Value="0" /> 
     <Setter Property="TabStripPlacement" Value="Bottom" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="TabControl"> 
        <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="*"/> 
         <RowDefinition Height="Auto"/> 
        </Grid.RowDefinitions> 

        <Grid Grid.Row="1" > 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="Auto"/> 
          <ColumnDefinition Width="*"/> 
         </Grid.ColumnDefinitions> 

         <TabPanel Grid.Column="0" Panel.ZIndex="1" IsItemsHost="True" Background="Transparent" /> 

         <ItemsControl Grid.Column="1"> 
          <ItemsControl.Items> 
           <Button Height="50">DOMINATES</Button> 
          </ItemsControl.Items> 
         </ItemsControl> 
        </Grid> 

        <ContentPresenter Grid.Row="0" ContentSource="SelectedContent" /> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     </Style> 

     <Style TargetType="{x:Type TabItem}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TabItem}"> 
        <Border Background="LightCyan" Padding="20,0"> 
        <TextBlock SnapsToDevicePixels="True" Text="{TemplateBinding Header}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" /> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     </Style> 
    </Window.Resources> 

    <TabControl> 
     <TabItem Header="TEST 123"> 
     <TextBlock>1</TextBlock> 
     </TabItem> 
     <TabItem Header="TEST 456"> 
     <TextBlock>2</TextBlock> 
     </TabItem> 
    </TabControl> 
</Window>

旁的TabItems其他控件放置 - 這是比的TabItems高得多。我如何拉伸TabItems並將TextBox放在中間（以便填充區域）？我可以動態調整填充嗎？

http://goo.gl/xcYOY3紅色標記區域應該填充並且文本框居中。這可能嗎？

THX :)

解決方案

<Window x:Class="WpfApplication2.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 
     <Style TargetType="TabControl"> 
      <Setter Property="Background" Value="Transparent" /> 
      <Setter Property="BorderThickness" Value="0" /> 
      <Setter Property="TabStripPlacement" Value="Bottom" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="TabControl"> 
         <Grid> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="*"/> 
           <RowDefinition Height="Auto"/> 
          </Grid.RowDefinitions> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
          <ContentPresenter Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="0" ContentSource="SelectedContent" /> 
          <TabPanel Panel.ZIndex="1" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsItemsHost="True" Background="Transparent" /> 
          <ItemsControl Grid.Row="1" Grid.Column="1" VerticalAlignment="Bottom"> 
           <ItemsControl.ItemContainerStyle> 
            <Style TargetType="FrameworkElement"> 
             <Setter Property="HorizontalAlignment" Value="Stretch"></Setter> 
            </Style> 
           </ItemsControl.ItemContainerStyle> 
           <Button Background="LightGray" Height="70" BorderThickness="0">DOMINATES</Button> 
          </ItemsControl> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style TargetType="{x:Type TabItem}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type TabItem}"> 
         <Grid Background="LightCyan" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabPanel}}, Path=ActualHeight}"> 
          <TextBlock SnapsToDevicePixels="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0" Text="{TemplateBinding Header}" ></TextBlock> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Window.Resources> 

    <TabControl> 
     <TabItem Header="TEST 123"> 
      <TextBlock >1</TextBlock> 
     </TabItem> 
     <TabItem Header="TEST 456"> 
      <TextBlock >2</TextBlock> 
     </TabItem> 
    </TabControl> 
</Window>

來源

2014-03-06 damike

如果我理解你正確審理設置*'HorizontalAlignment' *和*'VerticalAlignment' *爲TextBlock的這在'TabItem'就像這樣：'' –

Thx但這並沒有幫助：http://goo.gl/xcYOY3 仍然有大量的白色空間a t文本框的底部 - 我想填充它們，以便它們與按鈕的底部對齊。 – damike

我修改模板按你的圖像..please單獨運行此XAML代碼。

<Window.Resources> 
<Style TargetType="TabControl"> 
     <Setter Property="Background" Value="Transparent" /> 
     <Setter Property="BorderThickness" Value="0" /> 
     <Setter Property="TabStripPlacement" Value="Bottom" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="TabControl"> 
        <Grid> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="*"/> 
          <RowDefinition Height="50"/> 
         </Grid.RowDefinitions> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="Auto"/> 
          <ColumnDefinition Width="*"/> 
         </Grid.ColumnDefinitions> 
         <ContentPresenter Grid.ColumnSpan="2" Height="50" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" ContentSource="SelectedContent" /> 
         <Grid Grid.Row="1" Grid.Column="0" Background="LightCyan"> 
          <TabPanel Panel.ZIndex="1" HorizontalAlignment="Center" VerticalAlignment="Center" IsItemsHost="True" Background="Transparent" /> 
         </Grid> 
         <ItemsControl Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="1"> 
          <ItemsControl.ItemContainerStyle> 
           <Style TargetType="FrameworkElement"> 
            <Setter Property="HorizontalAlignment" Value="Stretch"></Setter> 
            <Setter Property="Height" Value="50"></Setter> 
           </Style> 
          </ItemsControl.ItemContainerStyle> 
          <Button Background="LightGray" BorderThickness="0">DOMINATES</Button> 
         </ItemsControl> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <Style TargetType="{x:Type TabItem}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TabItem}"> 
        <Grid Background="LightCyan" > 
         <TextBlock SnapsToDevicePixels="True" Margin="5,0,5,0" > 
         <ContentPresenter x:Name="ContentSite" HorizontalAlignment="Center" VerticalAlignment="Center" ContentSource="Header" RecognizesAccessKey="True"/> 
         </TextBlock> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 

<TabControl> 
    <TabItem Header="TEST 123"> 
     <TextBlock >1</TextBlock> 
    </TabItem> 
    <TabItem Header="TEST 456"> 
     <TextBlock >2</TextBlock> 
    </TabItem> 
</TabControl>

和輸出從上面的代碼是http://prntscr.com/2yc51f

更新

<Style TargetType="TabControl"> 
     <Setter Property="Background" Value="Transparent" /> 
     <Setter Property="BorderThickness" Value="0" /> 
     <Setter Property="TabStripPlacement" Value="Bottom" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="TabControl"> 
        <Grid> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="*"/> 
          <RowDefinition Height="50"/> 
         </Grid.RowDefinitions> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="Auto"/> 
          <ColumnDefinition Width="*"/> 
         </Grid.ColumnDefinitions> 
         <ContentPresenter Grid.ColumnSpan="2" Height="50" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" ContentSource="SelectedContent" /> 
         <TabPanel Panel.ZIndex="1" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" IsItemsHost="True" Background="Transparent" /> 
         <ItemsControl Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="1"> 
          <ItemsControl.ItemContainerStyle> 
           <Style TargetType="FrameworkElement"> 
            <Setter Property="HorizontalAlignment" Value="Stretch"></Setter> 
            <Setter Property="Height" Value="50"></Setter> 
           </Style> 
          </ItemsControl.ItemContainerStyle> 
          <Button Background="LightGray" BorderThickness="0">DOMINATES</Button> 
         </ItemsControl> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <Style TargetType="{x:Type TabItem}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TabItem}"> 
        <Grid Background="LightCyan" Height="50"> 
         <TextBlock SnapsToDevicePixels="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0,5,0" Text="{TemplateBinding Header}" ></TextBlock> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>

來源

2014-03-06 09:43:51

哇 - 我花了很長時間才弄清楚:) Thx很多!!!!!!!!! ！ – damike

這個解決方案存在一個巨大的問題：將網格背景從TabContent更改爲紅色，您將得到：http://prntscr.com/2yhtzg問題是，通過單擊紅色區域無法更改選項卡： - （ – damike

看看新的upadate.maybe這會幫助你..我已經做了tabitem和tabcontrol模板的幾個變化。 –

的TabControl - 正確對齊的TabItems如果自由空間主導

回答

相關問題