UWP Tabview Control Not responsive

0
votes

I am using Microsoft.UI.Xaml.Controls TabView control for my uwp application, Inside each tab I have different controls, I am using AdaptiveTrigger to do responsiveness for the controls.

In the orientation change from landscape to portrait the responsiveness(Adaptive trigger firing) is only for the selected tab only it is working as expected but when I change the selected tab the adaptive trigger not working.

Example I have 3 tabs Tab1, Tab2, Tab3 and my selected tab is Tab3, when I changed the orientation of the device then tab3 elements arranged according to the orientation but when I switched to a different tab (tab2) the controls inside the tab are not arranged according to orientation.

    <Grid x:Name="MainGrid" Margin="{StaticResource MediumLeftRightMargin}">
         <Grid.RowDefinitions>
             <RowDefinition x:Name="Row1"  Height="*"/>
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto"/>
             <ColumnDefinition Width="*"/>
         </Grid.ColumnDefinitions>
         <muxc:TabView Grid.Column="0" Grid.ColumnSpan="2"  Margin="0,0,0,0" x:Name="SearchHistoryTab"  SelectionChanged="TabSelectionChanged"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsAddTabButtonVisible="False">
             <muxc:TabViewItem x:Name="searchHistory" Margin="0,0,0,0" HeaderTemplate="{StaticResource HeaderTemplate}" FontWeight="Medium" FontSize="30" IsClosable="False">
                 <UserControl x:Name="usrSH">
                     <Grid x:Name="ContentArea1">
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup>
                                 <VisualState x:Name="shNormal">
                                     <VisualState.StateTriggers>
                                         <AdaptiveTrigger  MinWindowWidth="640" />
                                         <!--Potriot-->
                                     </VisualState.StateTriggers>
                                     <VisualState.Setters>
                                         <Setter Target="SHdiecastImage.(Grid.Row)" Value="1"></Setter>
                                         <Setter Target="SHdiecastImage.(Grid.Column)" Value="0"></Setter>
                                         <Setter Target="SHdiecastImage.(Grid.ColumnSpan)" Value="2"></Setter>
                                         <Setter Target="SHdiecastImage.HorizontalAlignment" Value="Center"></Setter>
                                         <Setter Target="SHinfo.(Grid.Row)" Value="2"></Setter>
                                         <Setter Target="SHinfo.(Grid.Column)" Value="0"></Setter>
                                         <Setter Target="SHinfo.(Grid.ColumnSpan)" Value="2"></Setter>
                                         <Setter Target="SHinfo.Background" Value="Red"></Setter>
                                         <Setter Target="pannelButtons.(Grid.Row)" Value="3"></Setter>
                                         <Setter Target="pannelButtons.(Grid.Column)" Value="0"></Setter>
                                         <Setter Target="pannelButtons.(Grid.ColumnSpan)" Value="2"></Setter>
                                     </VisualState.Setters>
                                 </VisualState>
                                 <VisualState x:Name="SHEwide">
                                     <VisualState.StateTriggers>
                                         <AdaptiveTrigger MinWindowWidth="1007"/>
                                     </VisualState.StateTriggers>
                                     <VisualState.Setters>
                                         <Setter Target="SHdiecastImage.(Grid.Row)" Value="1"></Setter>
                                         <Setter Target="SHdiecastImage.(Grid.Column)" Value="0"></Setter>
                                         <Setter Target="SHdiecastImage.(Grid.ColumnSpan)" Value="2"></Setter>
                                         <Setter Target="SHdiecastImage.HorizontalAlignment" Value="Center"></Setter>
                                         <Setter Target="SHinfo.(Grid.Row)" Value="2"></Setter>
                                         <Setter Target="SHinfo.(Grid.Column)" Value="0"></Setter>
                                         <Setter Target="SHinfo.(Grid.ColumnSpan)" Value="2"></Setter>
                                         <Setter Target="SHinfo.Background" Value="Red"></Setter>
                                         <Setter Target="pannelButtons.(Grid.Row)" Value="3"></Setter>
                                         <Setter Target="pannelButtons.(Grid.Column)" Value="0"></Setter>
                                         <Setter Target="pannelButtons.(Grid.ColumnSpan)" Value="2"></Setter>
                                     </VisualState.Setters>
                                 </VisualState>
                                 <VisualState x:Name="SHExtraWide">
                                     <VisualState.StateTriggers>
                                         <AdaptiveTrigger MinWindowWidth="1008" />
                                         <!--LandScape-->
                                     </VisualState.StateTriggers>
                                     <VisualState.Setters>
                                         <Setter Target="SHinfo.Background" Value="Green"></Setter>
                                         <Setter Target="SHinfo.(Grid.Row)" Value="1"></Setter>
                                         <Setter Target="SHinfo.(Grid.Column)" Value="1"></Setter>
                                         <Setter Target="SHdiecastImage.HorizontalAlignment" Value="Left"></Setter>
                                         <Setter Target="SHdiecastImage.(Grid.Row)" Value="1"></Setter>
                                         <Setter Target="SHdiecastImage.(Grid.Column)" Value="0"></Setter>
                                     </VisualState.Setters>
                                 </VisualState>
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
                         <Grid x:Name="SearchHistoryContentGrid">
                             <Grid.RowDefinitions>
                                 <RowDefinition x:Name="Row0" Height="*"/>
                                 <RowDefinition x:Name="Row2" Height="300"></RowDefinition>
                                 <RowDefinition x:Name="Row3" Height="Auto"></RowDefinition>
                                 <RowDefinition x:Name="Row4" Height="Auto"></RowDefinition>
                             </Grid.RowDefinitions>
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition x:Name="col1"  Width="300"/>
                                 <ColumnDefinition x:Name="col2"  Width="*"/>
                             </Grid.ColumnDefinitions>
                             <Grid Background="#c3c3c3"  Grid.Row="0"
                                                 Grid.Column="0"
                                                 Grid.ColumnSpan="2"  >
                                 <controls:DataGrid  x:Name="SearchHistoryDataGrid"
                                                 Grid.Row="0"
                                                 Grid.Column="0"
                                                 Grid.ColumnSpan="2"        
                                                  MinHeight="220"
                                                 VerticalAlignment="Top"
                                        GridLinesVisibility="All" 
                                        CanUserResizeColumns="False"
                                        AutoGenerateColumns="False"
                                        SelectionChanged="SearchHistorySelectionChanged"
                                        SelectedItem="{x:Bind SearchHistorySelectedkanagata,Mode=TwoWay}"
                                        SelectionMode="Single"
                                        ScrollViewer.VerticalScrollBarVisibility="Visible"
                                        Margin="0">
                                     <controls:DataGrid.ColumnHeaderStyle>
                                         <Style TargetType="controlsprimitives:DataGridColumnHeader">
                                             <Setter Property="ContentTemplate">
                                                 <Setter.Value>
                                                     <DataTemplate>
                                                         <TextBlock TextWrapping="Wrap" Text="{Binding}"></TextBlock>
                                                     </DataTemplate>
                                                 </Setter.Value>
                                             </Setter>
                                         </Style>
                                     </controls:DataGrid.ColumnHeaderStyle>
                                     <controls:DataGrid.Columns>
                                     </controls:DataGrid.Columns>
                                 </controls:DataGrid>
                             </Grid>
                             <Image x:Name="SHdiecastImage" Grid.Row="1" Grid.Column="0" Height="300" Width="300"  Stretch="Fill" Margin="0,10,10,0"></Image>
                             <controls:UniformGrid  Grid.Row="1" Grid.Column="1"  x:Name="SHinfo" Height="300" Rows="4" Columns="2" Margin="0,0,0,0"  HorizontalAlignment="Stretch">
                             </controls:UniformGrid>
                             <StackPanel x:Name="pannelButtons" Orientation="Horizontal" Grid.Row="2" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" Height="45" Margin="0,10,0,5">
                                 <Button x:Uid="btnSearchHistorySet" x:Name="btnSearchHistorySet" Click="SearchHistorySetClick"  Height="45" Width="150" FontSize="24" HorizontalAlignment="Right" Margin="0,0,0,0">
                                 </Button>
                             </StackPanel>
                         </Grid>
                     </Grid>
                 </UserControl>
             </muxc:TabViewItem>
             <muxc:TabViewItem x:Name="textSearch" HeaderTemplate="{StaticResource HeaderTemplate2}" FontWeight="Medium" FontSize="30" IsClosable="False">
                 <UserControl>
                     <Grid x:Name="ContentArea">
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup>
                                 <VisualState x:Name="tNormal">
                                     <VisualState.StateTriggers>
                                         <AdaptiveTrigger  MinWindowWidth="640" />
                                         <!--Potriot-->
                                     </VisualState.StateTriggers>
                                     <VisualState.Setters>
    
                                         <Setter Target="txtSearchImage.(Grid.Row)" Value="2"></Setter>
                                         <Setter Target="txtSearchImage.(Grid.Column)" Value="0"></Setter>
                                         <Setter Target="txtSearchImage.(Grid.ColumnSpan)" Value="2"></Setter>
                                         <Setter Target="txtSearchImage.HorizontalAlignment" Value="Center"></Setter>
    
                                         <Setter Target="txtSearchInfo.(Grid.Row)" Value="3"></Setter>
                                         <Setter Target="txtSearchInfo.(Grid.Column)" Value="0"></Setter>
                                         <Setter Target="txtSearchInfo.(Grid.ColumnSpan)" Value="2"></Setter>
                                         <Setter Target="txtSearchInfo.Background" Value="Red"></Setter>
    
    
                                         <Setter Target="panneltextSearchButtons.(Grid.Row)" Value="4"></Setter>
                                         <Setter Target="panneltextSearchButtons.(Grid.Column)" Value="0"></Setter>
                                         <Setter Target="panneltextSearchButtons.(Grid.ColumnSpan)" Value="2"></Setter>
    
                                     </VisualState.Setters>
                                 </VisualState>
                                 <VisualState x:Name="tEwide">
                                     <VisualState.StateTriggers>
                                         <AdaptiveTrigger MinWindowWidth="1007"/>
                                     </VisualState.StateTriggers>
                                     <VisualState.Setters>
    
                                         <Setter Target="txtSearchImage.(Grid.Row)" Value="2"></Setter>
                                         <Setter Target="txtSearchImage.(Grid.Column)" Value="0"></Setter>
                                         <Setter Target="txtSearchImage.(Grid.ColumnSpan)" Value="2"></Setter>
                                         <Setter Target="txtSearchImage.HorizontalAlignment" Value="Center"></Setter>
    
                                         <Setter Target="txtSearchInfo.(Grid.Row)" Value="3"></Setter>
                                         <Setter Target="txtSearchInfo.(Grid.Column)" Value="0"></Setter>
                                         <Setter Target="txtSearchInfo.(Grid.ColumnSpan)" Value="2"></Setter>
                                         <Setter Target="txtSearchInfo.Background" Value="Red"></Setter>
    
    
                                         <Setter Target="panneltextSearchButtons.(Grid.Row)" Value="4"></Setter>
                                         <Setter Target="panneltextSearchButtons.(Grid.Column)" Value="0"></Setter>
                                         <Setter Target="panneltextSearchButtons.(Grid.ColumnSpan)" Value="2"></Setter>
                                     </VisualState.Setters>
                                 </VisualState>
                                 <VisualState x:Name="tExtraWide">
                                     <VisualState.StateTriggers>
                                         <AdaptiveTrigger MinWindowWidth="1008" />
                                         <!--LandScape-->
                                     </VisualState.StateTriggers>
                                     <VisualState.Setters>
                                         <Setter Target="txtSearchInfo.(Grid.Row)" Value="2"></Setter>
                                         <Setter Target="txtSearchInfo.(Grid.Column)" Value="1"></Setter>
                                         <Setter Target="txtSearchImage.HorizontalAlignment" Value="Left"></Setter>
                                         <Setter Target="txtSearchImage.(Grid.Row)" Value="2"></Setter>
                                         <Setter Target="txtSearchImage.(Grid.Column)" Value="0"></Setter>
                                         <Setter Target="txtSearchInfo.Background" Value="Green"></Setter>
                                         <Setter Target="txtSearchDiecastHistoryDataGrid.(Grid.Row)" Value="0"></Setter>
                                         <Setter Target="txtSearchDiecastHistoryDataGrid.(Grid.Column)" Value="0"></Setter>
                                         <Setter Target="txtSearchDiecastHistoryDataGrid.(Grid.ColumnSpan)" Value="2"></Setter>
                                     </VisualState.Setters>
                                 </VisualState>
                                 <VisualState x:Name="tExtraWide2">
                                     <VisualState.StateTriggers>
                                         <AdaptiveTrigger MinWindowWidth="1400" />
                                         <!--LandScape-->
                                     </VisualState.StateTriggers>
                                     <VisualState.Setters>
                                         <Setter Target="txtSearchInfo.(Grid.Row)" Value="2"></Setter>
                                         <Setter Target="txtSearchInfo.(Grid.Column)" Value="1"></Setter>
                                         <Setter Target="txtSearchImage.HorizontalAlignment" Value="Left"></Setter>
                                         <Setter Target="txtSearchImage.(Grid.Row)" Value="2"></Setter>
                                         <Setter Target="txtSearchImage.(Grid.Column)" Value="0"></Setter>
                                         <Setter Target="txtSearchInfo.Background" Value="Green"></Setter>
                                         <Setter Target="txtSearchDiecastHistoryDataGrid.(Grid.Row)" Value="0"></Setter>
                                         <Setter Target="txtSearchDiecastHistoryDataGrid.(Grid.Column)" Value="0"></Setter>
                                         <Setter Target="txtSearchDiecastHistoryDataGrid.(Grid.ColumnSpan)" Value="2"></Setter>
                                     </VisualState.Setters>
                                 </VisualState>
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
                         <Grid>
                             <Grid.RowDefinitions>
                                 <RowDefinition x:Name="tRow0" Height="*"/>
                                 <RowDefinition x:Name="tRow2" Height="Auto"></RowDefinition>
                                 <RowDefinition x:Name="tRow3" Height="300"></RowDefinition>
                                 <RowDefinition x:Name="tRow4" Height="Auto"></RowDefinition>
                                 <RowDefinition x:Name="tRow5" Height="Auto"></RowDefinition>
                             </Grid.RowDefinitions>
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition x:Name="tcol1"  Width="300"/>
                                 <ColumnDefinition x:Name="tcol2"  Width="*"/>
                             </Grid.ColumnDefinitions>
                                 <controls:DataGrid x:Name="txtSearchDiecastHistoryDataGrid"
                                                        Background="Black"
                                                 Grid.Row="0"
                                                 Grid.Column="0"
                                                 Grid.ColumnSpan="2"
                                                 MinHeight="220"
                                                 SelectionChanged="txtSearchDiecastHistoryDataGrid_SelectionChanged"
                                                 VerticalAlignment="Top"
                                        GridLinesVisibility="All" 
                                        CanUserResizeColumns="False"
                                        AutoGenerateColumns="False"
                                        SelectionMode="Single"
                                        ScrollViewer.VerticalScrollBarVisibility="Visible"
                                        Margin="0">
                                     <!--<i:Interaction.Behaviors>
                                     <ic:EventTriggerBehavior EventName="SelectionChanged">
                                         <ic:InvokeCommandAction Command="{x:Bind ViewModel.SelectionChanged}" />
                                     </ic:EventTriggerBehavior>
                                 </i:Interaction.Behaviors>-->
                                     <controls:DataGrid.Columns>
                                     </controls:DataGrid.Columns>
                                 </controls:DataGrid>
                             <TextBlock x:Uid="txtNoRecorrds" x:Name="txtNoRecorrds"
                                 Grid.Row="1"
                                                 Grid.Column="0" Grid.ColumnSpan="2"
                                                 Foreground="Red" FontSize="22" HorizontalAlignment="Center" VerticalAlignment="Top" Visibility="Collapsed"></TextBlock>
                             <Image x:Name="txtSearchImage" Grid.Row="1" Grid.Column="0" Height="300" Width="300"  Stretch="Fill" Margin="0,10,10,0" Source="{x:Bind TextSearchKanagata.ImageFile,Mode=TwoWay}" ></Image>
                             <controls:UniformGrid    Grid.Row="1" Grid.Column="1"           x:Name="txtSearchInfo" Height="300"  Rows="4" Columns="2"  Margin="10,0,0,0"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                             </controls:UniformGrid>
                             <StackPanel x:Name="panneltextSearchButtons" Orientation="Horizontal" Grid.Row="4" Grid.RowSpan="5" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" Height="45" Margin="0,10,0,5">
                                 <Button x:Uid="btnSet" x:Name="txtbtnSet"  Height="45" Width="150" FontSize="24"  HorizontalAlignment="Right" Margin="0,0,0,0" Click="btnSet_Click">
                                 </Button>
                             </StackPanel>
                         </Grid>
                     </Grid>
                 </UserControl>
             </muxc:TabViewItem>
         </muxc:TabView>
     </Grid>
1
c#uwpuwp-xamlwindows-community-toolkit
The code snippet contains a lot of undefined code, such as HeaderTemplate, MediumLeftRightMargin, property binding. It prevents me from reproducing your issue. According to your code structure, I have created a new but more simple TabView, it works well. When I change the window width, the Tab2 layout changes, after I switch to Tab1, the Tab1 layout also changes. - dear_vv
I’d suggest you create a new tabview and just add some controls as less as you could to reproduce this issue. That will be helpful to locate the issue. Another way is that, please optimize your code and share us a minimal sample that only keeps the necessary code reproducing this issue on OneDrive or GitHub. - dear_vv

1 Answers

0
votes

I can reproduce your issue based on your sample, please try the following steps to solve it.

In your TabviewItem whose header is TabB, you changed the height of Row2 and Row3 in VisualState that named Normal and EWide, but I can’t find these two rows in this TabviewItem, it is located in the first TabViewItem whose header is TabA. This affects the adaptive activity, so you could remove the following code in TabB to solve this issue.

<Setter Target="Row2.Height" Value=".4*"></Setter>
<Setter Target="Row3.Height" Value=".6*"></Setter>

In addition, for more performance, you don’t need to set two AdaptiveTrigger that MinWindowWidth="1007" and MinWindowWidth="1008", these two trigger widths are too close, which cause it will only trigger the AdaptiveTrigger whose MinWindowWidth="1008". I suggest you could only save MinWindowWidth="640" and MinWindowWidth="1008".

Update:

I suggest you could try to detect the Windows orientation change event via Window.SizeChanged event, then use VisualStateManager.GoToState method to switch state. As follows:

public MainPage()
{
    InitializeComponent();
    Window.Current.SizeChanged += (sender, args) =>
    {
        ApplicationView currentView = ApplicationView.GetForCurrentView();

        if (currentView.Orientation == ApplicationViewOrientation.Landscape)
        {
            // when 640<args.Size.Width <1008
// VisualStateManager.GoToState(tabViewitem1,”shNormal"”,true)
// VisualStateManager.GoToState(tabViewitem2,”tNormal"”,true)
        }
        else if (currentView.Orientation == ApplicationViewOrientation.Portrait)
        {
           
        }
    };
}