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