question

rajusomala-6534 avatar image
0 Votes"
rajusomala-6534 asked rajusomala-6534 commented

UWP TabView Not Responsive.

Hi Team ,

I am using Microsoft.UI.Xaml.Controls TabView control for my uwp application, Inside each tab i have diffeent 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 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 device then tab3 elements arranged according to the orientation but when I switched to differnt tab (tab2) the controls inside 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>
windows-uwp
· 6
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@rajusomala-6534 I can’t reproduce your issue based on the above code. Could you please reduce your code(such as removing unnecessary controls) and provide a minimal reproducible example that only reflects the situation?

0 Votes 0 ·

OK. I will Reduce the code

0 Votes 0 ·

Hi , I removed controls, 3/4th code is removed. Main controls are there as it is. Please help me with the issue.

0 Votes 0 ·

@rajusomala-6534 The code snippet contains a lot of undefined code, such as HeaderTemplate, MediumLeftRightMargin, property binding. It prevent 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.

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.

0 Votes 0 ·
Show more comments

1 Answer

AryaDing-MSFT avatar image
0 Votes"
AryaDing-MSFT answered rajusomala-6534 commented

Hi,

Welcome to Microsoft Q&A!

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, these rows are 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".



If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.










· 7
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi ,

I tried your solution, I completely removed Tab B, now I have only 2 tabs. but I am still facing the same issue.

Updated latest code is available, I am facing the same issue with 2 tabs also. Please support me this very crucial for our application.

https://1drv.ms/u/s!AvDdG8vEKH8ibI--SKUiq1vJqOk?e=c6p0MH.

0 Votes 0 ·

I have tested your sample on surface pro tablet, and I can’t reproduce your issue. When I change the device orientation from landscape to portrait, the tabC elements change the layout according to the orientation, when I switch to tabA, these controls inside the tab also are arranged according to orientation. There have three images,
the first image – landscape(tabC);
the second image- portrait (tabC);
the third image- portrait(switch from tabC to tabA);
You could check them.
1:
The first image – landscape(tabC)
2:
The second image- portrait (tabC)
3:
The third image- portrait(tabA)


0 Votes 0 ·
1.png (470.8 KiB)
2.png (2.0 MiB)
3.png (1.6 MiB)

hI ,thanks for your support.

On my windows tab(Windows Surface Go 10''), I am still facing the issue, I am really stuck.

With very minimal code i am not able to get correct responsiveness.

it is something specific to winui version tab control or hardware or do I need to refresh user control after tab selection changed.

After tab selection changed I updated the visual state even after that i am facing the same issue.

0 Votes 0 ·
Show more comments