UWP Tabview Control Not responsive
Question
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 answers
solution1
0 2021-05-20 10:01:16
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)
{
}
};
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
UWP NavigationView and TabView collision
UWP Hide TabView Footer
UWP TabView RepeatButton
How to set Tab Header Position Bottom in TabView control in xaml uwp app
Modify margins above a UWP TabView
UWP | TabView class not recognizable from IDE
UWP TabView OneWay x:Bind does not update
UWP - Saving Tabs From The TabView class
UWP ListView with responsive columns
Application hangs when adding a control to a tabview page
Related Tags