时间戳

首页 > 解决方案 > 如何在选择时更改 xamarin shell 中 flyoutitem 的视觉效果？

xaml - 如何在选择时更改 xamarin shell 中 flyoutitem 的视觉效果？

问题描述

我想通过更改 Flyoutitem 的背景颜色来突出显示当前页面，但我还需要更改框架内的文本颜色。我的模板

<Grid ...>
 <Frame CornerRadius="10"
        Padding="0"
        BackgroundColor="White"
        Grid.Column="1">
        <Label Text="{Binding Title}"
               Margin="50,0,0,0"
               HorizontalOptions="FillAndExpand"
               VerticalOptions="FillAndExpand"
               VerticalTextAlignment="Center"
               TextColor="Black"
               Grid.Column="1"/>
</Frame>
</Grid>

每当我导航到某个页面时，我都需要将框架颜色更改为深绿色并将文本颜色标记为白色。我已经尝试过视觉状态管理器，但即使只使用背景也不起作用。我找到了在框架上附加触发器的解决方案，但没有任何反应

protected override void Invoke(Frame sender)
{
    sender.BackgroundColor = Color.FromHex("#229904");
    (sender.Content as Label).TextColor = Color.White;
}

标签： xamlxamarinxamarin.formsxamarin.shell

解决方案

首先，您需要在资源中添加自定义样式：

<Style x:Key="FloutItemStyle" TargetType="Grid">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="xxx"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

然后在您的 Shell 中使用它：

<Shell.ItemTemplate>
    <DataTemplate >
        <Grid Style="{StaticResource FloutItemStyle}">

         //...
        </Grid>
    </DataTemplate>
</Shell.ItemTemplate>

推荐阅读