Search code examples
c#.netuwpuwp-xamlfluent-design

Extend TabViewItem.Content past width of TabView

I am looking to have a gap between my Title Bar buttons and my Tab layout like say a browser has
I currently have a Microsoft.UI.Xaml.TabView which is on a column with a margin of 300
Im trying to get the TabViewItem.Content to extend past where the width of the TabView stops (to make the TabView have a gap between the last tabs and the Title Bar)

This is my XAML: 

<Grid x:Name="TitleBar">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="300"/>
    </Grid.ColumnDefinitions>
    <Grid x:Name="AppTitleBar" Background="Transparent">
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
            <ColumnDefinition/>
            <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
        </Grid.ColumnDefinitions>
        <TextBlock x:Name="AppTitleTextBlock"
               Text="App title" 
               Style="{StaticResource CaptionTextBlockStyle}" 
               Grid.Column="1"
               VerticalAlignment="Center"
               Margin="28,0,0,0"/>
    </Grid>

    <Grid x:Name="MainGrid">
        <c:TabView VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Name="Tabs" AddTabButtonClick="TabView_AddTabButtonClick" TabCloseRequested="TabView_TabCloseRequested" Visibility="Visible" Margin="0 0 0 0">
        </c:TabView>
    </Grid>
</Grid>

And the result i get:

result

I need a way of expanding the content to the full width whilst keeping the tabs where they end

Solution

  • Based on the design of the TabView here:https://learn.microsoft.com/en-us/windows/apps/design/controls/tab-view#anatomy Please try to add some content for the TabStripFooter of the Tabview titlebar.

      <Grid x:Name="TitleBar">
  <Grid x:Name="AppTitleBar" Background="Transparent">
      <Grid.ColumnDefinitions>
          <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
          <ColumnDefinition/>
          <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
      </Grid.ColumnDefinitions>
      <TextBlock x:Name="AppTitleTextBlock"
         Text="App title" 
         Grid.Column="1"
         VerticalAlignment="Center"
         Margin="28,0,0,0"/>
  </Grid>

  <Grid x:Name="MainGrid">
      <muxc:TabView VerticalAlignment="Stretch" 
                    HorizontalAlignment="Stretch"
                    Name="Tabs" 
                    AddTabButtonClick="Tabs_AddTabButtonClick" 
                    TabCloseRequested="Tabs_TabCloseRequested" Visibility="Visible" Margin="0 0 0 0">
          <muxc:TabView.TabStripFooter>
              <Grid Width="200" Background="Transparent" >
                  
              </Grid>
          </muxc:TabView.TabStripFooter>
      </muxc:TabView>
  </Grid>