如何在Xamarin Forms中更改控件的视觉状态？

debugcn 发表于 Dev

鲁文德拉·尤汉（Ruvindra Yohan）

我试图使用普通的xamarin表单制作类似于视图的选项卡，因为我不想使用任何第三方插件。为此，我使用了如下两个框架，并在点击该框架以使其看起来像这样时将其状态更改为“已选择”和“未选择”。

镜框样式：

<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具有4种状态，例如“正常”，“禁用”，“聚焦”，“选定”。我们可以定义自己的VisualElement。

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;
        }
    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。