UWP TabView Not Responsive.

Question

UWP TabView Not Responsive.

raju somala 21

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>

AryaDing-MSFT 2,916 Reputation points

2021-05-12T09:40:44.57+00:00

@raju somala 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?
raju somala 21 Reputation points

2021-05-12T11:52:00.84+00:00

OK. I will Reduce the code
raju somala 21 Reputation points

2021-05-13T05:54:53.53+00:00

Hi , I removed controls, 3/4th code is removed. Main controls are there as it is. Please help me with the issue.
AryaDing-MSFT 2,916 Reputation points

2021-05-13T09:55:33.833+00:00

@raju somala 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.
raju somala 21 Reputation points

2021-05-19T12:08:53.81+00:00

Hi AryaDing-MSFT,

I have uploaded the code in one drive.

https://1drv.ms/u/s!AvDdG8vEKH8ia0qq_lkDikTgeNw?e=s2hvge

I also attached the images of the error for your reference. I am using the Surface Go 10'' tablet to test it. And application should run in surface go.
raju somala 21 Reputation points

2021-05-26T10:15:02.583+00:00

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.

1 answer

Your answer

AryaDing-MSFT 2,916 Reputation points

2021-05-12T09:40:44.57+00:00

@raju somala 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?
raju somala 21 Reputation points

2021-05-12T11:52:00.84+00:00

OK. I will Reduce the code
raju somala 21 Reputation points

2021-05-13T05:54:53.53+00:00

Hi , I removed controls, 3/4th code is removed. Main controls are there as it is. Please help me with the issue.
AryaDing-MSFT 2,916 Reputation points

2021-05-13T09:55:33.833+00:00

@raju somala 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.
raju somala 21 Reputation points

2021-05-19T12:08:53.81+00:00

Hi AryaDing-MSFT,

I have uploaded the code in one drive.

https://1drv.ms/u/s!AvDdG8vEKH8ia0qq_lkDikTgeNw?e=s2hvge

I also attached the images of the error for your reference. I am using the Surface Go 10'' tablet to test it. And application should run in surface go.
raju somala 21 Reputation points

2021-05-26T10:15:02.583+00:00

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.

Answer 1

AryaDing-MSFT 2,916

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.

raju somala 21 Reputation points

2021-05-21T13:48:25.053+00:00

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.
AryaDing-MSFT 2,916 Reputation points

2021-05-27T10:15:33.153+00:00

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:

2:

3:
raju somala 21 Reputation points

2021-05-31T13:06:09.5+00:00

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.
AryaDing-MSFT 2,916 Reputation points

2021-06-01T05:21:26.033+00:00

@raju somala What version is the winui tab control you used?
AryaDing-MSFT 2,916 Reputation points

2021-06-01T05:22:28.077+00:00

@raju somala We are consulting other engineers about your issue, there might be some delay.
raju somala 21 Reputation points

2021-06-01T06:32:34.31+00:00

Microsoft.UI.Xaml (2.5.0)

Thanks for your support, it helps me a lot if we find a solution.
raju somala 21 Reputation points

2021-06-07T10:33:34.243+00:00

Hi ,

Any update on this issue.

Share via

UWP TabView Not Responsive.

1 answer

Your answer