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

Question

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

我有这样的 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 的解决方案

Answer 1

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

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

Answer 2

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