UWP Tabview 控件無響應
[英]UWP Tabview Control Not responsive
問題描述
我正在為我的 uwp 應用程序使用 Microsoft.UI.Xaml.Controls TabView 控件，在每個選項卡內我有不同的控件，我正在使用 AdaptiveTrigger 對控件進行響應。
在從橫向到縱向的方向更改中，響應性（自適應觸發器觸發）僅適用於所選選項卡，它僅按預期工作，但是當我更改所選選項卡時，自適應觸發器不起作用。
示例我有 3 個選項卡 Tab1、Tab2、Tab3，我選擇的選項卡是 Tab3，當我更改設備的方向時，tab3 元素根據方向排列，但是當我切換到不同的選項卡 (tab2) 時，選項卡內的控件是不按方向排列。
<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 個解決方案
解決方案1
0 2021-05-20 10:01:16
我可以根據您的示例重現您的問題，請嘗試以下步驟來解決它。
在您的 header 為 TabB 的TabviewItem中，您更改了名為Normal和EWide的 VisualState 中Row2和Row3的高度，但我在此 TabviewItem 中找不到這兩行，它位於第一個 TabViewItem 中，其 header 為TabA 這會影響自適應活動，因此您可以刪除TabB中的以下代碼來解決此問題。
<Setter Target="Row2.Height" Value=".4*"></Setter>
<Setter Target="Row3.Height" Value=".6*"></Setter>
另外，為了更好的性能，不需要設置MinWindowWidth="1007"和MinWindowWidth="1008"兩個 AdaptiveTrigger ，這兩個觸發寬度太接近了，只會觸發 MinWindowWidth="1008 的 AdaptiveTrigger ”。 我建議你只能保存 MinWindowWidth="640" 和 MinWindowWidth="1008"。
更新：
建議您可以嘗試通過Window.SizeChanged 事件檢測 Windows 方向變化事件，然后使用VisualStateManager.GoToState方法切換 state。 如下：
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)
{
}
};
}
如何設置 Tab Header Position TabView 控件底部 xaml ZD0836D7D5DBADA368E56915F6B3 應用程序
[英]How to set Tab Header Position Bottom in TabView control in xaml uwp app
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
UWP NavigationView和TabView碰撞
UWP 隱藏 TabView 頁腳
UWP TabView 重復按鈕
如何設置 Tab Header Position TabView 控件底部 xaml ZD0836D7D5DBADA368E56915F6B3 應用程序
修改 UWP TabView 上方的邊距
UWP | TabView class 無法從 IDE 識別
UWP TabView OneWay x：Bind無法更新
UWP - 從 TabView 中保存選項卡 class
帶有響應列的 UWP ListView
將控件添加到TabView頁面時，應用程序掛起
相關標簽