如何更改 Xamarin Forms 中控件的视觉状态?
How to change the visual state of a control in Xamarin Forms?
我正在尝试使用普通的 xamarin 表单制作类似视图的选项卡,因为我不想使用任何第三方插件。为此,我使用了如下所示的两个框架,并在点击该框架时将其状态更改为 "Selected" & "Unselected" 以使其看起来像那样。
框架样式:
<Style TargetType="Frame">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Orange" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="UnSelected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="White" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
我的相框:
<Frame x:Name="AllNewsTab" Padding="10,5,10,5" CornerRadius="3" HasShadow="False" VerticalOptions="FillAndExpand">
<Label Text="All" FontFamily="{StaticResource BoldFont}" TextColor="{StaticResource BodyTextColor}" FontSize="Medium" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="Tab_Tapped"/>
</Frame.GestureRecognizers>
</Frame>
点击事件:
private void Tab_Tapped(object sender, EventArgs e)
{
if (frameSelected != null)
VisualStateManager.GoToState(frameSelected, "UnSelected");
VisualStateManager.GoToState((Frame)sender, "Selected");
frameSelected = (Frame)sender;
}
但是我希望页面第一次出现时,有一个框架看起来是被选中的。所以我试着在页面 OnAppearing 方法中这样做。但它不起作用。
这里有什么问题?
protected override void OnAppearing()
{
VisualStateManager.GoToState(AllNewsTab, "Selected");
base.OnAppearing();
}
试试这个,
在 xamarin 中,VisualElement 有 Normal、Disabled、Focused、Selected 四种状态。
我们可以定义自己的 VisualElements。
MainPage.Xml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="Xam_VS_Test.Views.MainPage">
<ContentPage.Resources>
<Style TargetType="Frame">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup Name="SelectionStates">
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Orange" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="UnSelected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="White" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Orientation="Vertical" >
<Frame x:Name="AllNewsTab" Padding="10,5,10,5" HeightRequest="20" WidthRequest="50" HorizontalOptions="FillAndExpand" CornerRadius="3" HasShadow="False" VerticalOptions="FillAndExpand">
<Label Text="All" FontSize="Large" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="Tab_Tapped"/>
</Frame.GestureRecognizers>
</Frame>
<Frame x:Name="AllNewsTab2" Padding="10,5,10,5" HeightRequest="20" WidthRequest="50" HorizontalOptions="FillAndExpand" CornerRadius="3" HasShadow="False" VerticalOptions="FillAndExpand">
<Label Text="1" FontSize="Large" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="Tab_Tapped"/>
</Frame.GestureRecognizers>
</Frame>
<Frame x:Name="AllNewsTab3" Padding="10,5,10,5" HeightRequest="20" WidthRequest="50" HorizontalOptions="FillAndExpand" CornerRadius="3" HasShadow="False" VerticalOptions="FillAndExpand">
<Label Text="2" FontSize="Large" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="Tab_Tapped"/>
</Frame.GestureRecognizers>
</Frame>
</StackLayout>
</ContentPage.Content>
</ContentPage>
MainPage.cs
public partial class MainPage : ContentPage
{
Frame frameSelected;
public MainPage()
{
InitializeComponent();
}
protected override void OnAppearing()
{
if (frameSelected == null)
{
VisualStateManager.GoToState(AllNewsTab, "Selected");
frameSelected = AllNewsTab;
}
base.OnAppearing();
}
private void Tab_Tapped(object sender, EventArgs e)
{
if (frameSelected != null)
VisualStateManager.GoToState(frameSelected, "UnSelected");
VisualStateManager.GoToState((Frame)sender, "Selected");
frameSelected = (Frame)sender;
}
}
我正在尝试使用普通的 xamarin 表单制作类似视图的选项卡,因为我不想使用任何第三方插件。为此,我使用了如下所示的两个框架,并在点击该框架时将其状态更改为 "Selected" & "Unselected" 以使其看起来像那样。
框架样式:
<Style TargetType="Frame">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Orange" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="UnSelected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="White" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
我的相框:
<Frame x:Name="AllNewsTab" Padding="10,5,10,5" CornerRadius="3" HasShadow="False" VerticalOptions="FillAndExpand">
<Label Text="All" FontFamily="{StaticResource BoldFont}" TextColor="{StaticResource BodyTextColor}" FontSize="Medium" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="Tab_Tapped"/>
</Frame.GestureRecognizers>
</Frame>
点击事件:
private void Tab_Tapped(object sender, EventArgs e)
{
if (frameSelected != null)
VisualStateManager.GoToState(frameSelected, "UnSelected");
VisualStateManager.GoToState((Frame)sender, "Selected");
frameSelected = (Frame)sender;
}
但是我希望页面第一次出现时,有一个框架看起来是被选中的。所以我试着在页面 OnAppearing 方法中这样做。但它不起作用。 这里有什么问题?
protected override void OnAppearing()
{
VisualStateManager.GoToState(AllNewsTab, "Selected");
base.OnAppearing();
}
试试这个, 在 xamarin 中,VisualElement 有 Normal、Disabled、Focused、Selected 四种状态。 我们可以定义自己的 VisualElements。
MainPage.Xml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="Xam_VS_Test.Views.MainPage">
<ContentPage.Resources>
<Style TargetType="Frame">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup Name="SelectionStates">
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Orange" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="UnSelected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="White" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Orientation="Vertical" >
<Frame x:Name="AllNewsTab" Padding="10,5,10,5" HeightRequest="20" WidthRequest="50" HorizontalOptions="FillAndExpand" CornerRadius="3" HasShadow="False" VerticalOptions="FillAndExpand">
<Label Text="All" FontSize="Large" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="Tab_Tapped"/>
</Frame.GestureRecognizers>
</Frame>
<Frame x:Name="AllNewsTab2" Padding="10,5,10,5" HeightRequest="20" WidthRequest="50" HorizontalOptions="FillAndExpand" CornerRadius="3" HasShadow="False" VerticalOptions="FillAndExpand">
<Label Text="1" FontSize="Large" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="Tab_Tapped"/>
</Frame.GestureRecognizers>
</Frame>
<Frame x:Name="AllNewsTab3" Padding="10,5,10,5" HeightRequest="20" WidthRequest="50" HorizontalOptions="FillAndExpand" CornerRadius="3" HasShadow="False" VerticalOptions="FillAndExpand">
<Label Text="2" FontSize="Large" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="Tab_Tapped"/>
</Frame.GestureRecognizers>
</Frame>
</StackLayout>
</ContentPage.Content>
</ContentPage>
MainPage.cs
public partial class MainPage : ContentPage
{
Frame frameSelected;
public MainPage()
{
InitializeComponent();
}
protected override void OnAppearing()
{
if (frameSelected == null)
{
VisualStateManager.GoToState(AllNewsTab, "Selected");
frameSelected = AllNewsTab;
}
base.OnAppearing();
}
private void Tab_Tapped(object sender, EventArgs e)
{
if (frameSelected != null)
VisualStateManager.GoToState(frameSelected, "UnSelected");
VisualStateManager.GoToState((Frame)sender, "Selected");
frameSelected = (Frame)sender;
}
}