繁体   English   中英

Maui 基于按钮过滤内容,更新 UI

[英]Maui Filter Content based on button, update UI

我正在尝试根据这样的一些按钮来过滤内容

在此处输入图像描述

我有这样的 XAML 设置

        <CollectionView Grid.Row="0"
                    ItemsSource="{Binding Categories}" 
                    ItemsLayout="HorizontalList"
                    Margin="20,0"
                    x:Name="els">
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="x:String">
                <Button Style="{StaticResource ButtonOutline}" Text="{Binding .}" FontSize="20" Margin="5,10"
                        Clicked="CategorySelected"/>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

我的页面有以下事件方法,这个想法是改变被点击按钮的样式

private void CategorySelected(object sender, EventArgs e)
{
    var btn = (Button)sender;
    btn.TextColor = Color.Parse("#FFFFFF");
    viewModel.ChangeCategory(btn.Text);     
}

一切都按预期工作,但我似乎无法找到一种方法来更改所有其他未单击的按钮的样式。 我怎样才能访问它们? 我可以在我的代码中访问 CollectionView,但我无法访问我在调试模式下可以访问的 Children 变量(在多次访问 base 之后),我尝试了所有类型的转换,但没有成功

在此处输入图像描述

有没有办法接触到这些孩子? 或者也许是另一个更像 MVVM 的解决方案

  1. 样式本身就足以实现这一点,例如通过设置 VisualStates。

  2. 您正在尝试使用 RadioButtons 创建一个 RadioGroup。 您可以只使用这些控件。 (不过我看你是在练习,我认得这段代码)

  3. DataTriggers 可用于更改控件的外观。 结合一些值转换器,您可以完成这项工作。

  4. 我还建议使用 CollectionView 的 SelectedItem。 然而,现在有一些关于水平 CollectionView 的非常严重的错误。 (忘记间距)以及有关禁用/启用和更改视觉 state 的错误。

我的代码充满了“//TODO:修复github 问题链接已解决”。 所以我不建议你现在付出太多的努力。 使其可点击并继续。

编辑:关于你的问题,例如检查这个:

<RadioButton Content="{Binding .}">
<RadioButton.ControlTemplate>
    <ControlTemplate>
        <Grid RowDefinitions="30,4">
            <Label Text="{TemplateBinding Content}" />
            <BoxView Grid.Row="1" Color="Transparent"/>
        </Grid>
    </ControlTemplate>
</RadioButton.ControlTemplate>

并使其改变风格:

<ControlTemplate>
<Grid RowDefinitions="30,4">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CheckedStates">
                <VisualState x:Name="Checked">
                    <VisualState.Setters>
                        <Setter
                            TargetName="TextLabel"
                            Property="Label.TextColor"
                            Value="{StaticResource Primary}"/>
                        <Setter
                            TargetName="Indicator"
                            Property="BoxView.Color"
                            Value="{StaticResource Primary}"/>
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="Unchecked">
                    <VisualState.Setters>
                        <Setter
                            TargetName="TextLabel"
                            Property="Label.TextColor"
                            Value="White"/>
                        <Setter
                            TargetName="Indicator"
                            Property="BoxView.Color"
                            Value="Transparent"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </VisualStateManager.VisualStateGroups>
    <Label Text="{TemplateBinding Content}" x:Name="TextLabel" />
    <BoxView x:Name="Indicator" Grid.Row="1" Color="Transparent"/>
</Grid>

这是从这里:

https://dev.to/davidortinau/making-a-tabbar-or-segmentedcontrol-in.net-maui-54ha

关于制作您自己的控件的非常有用的示例。 我建议查看该博客中的所有内容。

如果有人有同样的问题,我建议在 Github 上查看这个项目,他完美地解决了这个maui-starbucks-ui

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM