XAML MAUI:CollectionView更改选定内容中框架的背景色不起作用

ctrmrzij  于 2023-02-17  发布在  其他
关注(0)|答案(1)|浏览(465)

我正在尝试改变所选项目的颜色,如maui教程中所述:https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/collectionview/selection?view=net-maui-7.0
但它似乎并不工作正确。我的targettype是一个框架,我设置为属性:边框颜色为绿色色(正常时),边框颜色为浅蓝色(选中时)。但是,该选择完全被忽略,而是将默认的灰色条置于选择后面,如下所示:

我添加了我的代码:

<ContentPage.Resources>
           <Style TargetType="Frame">
               <Setter Property="VisualStateManager.VisualStateGroups">
                   <VisualStateGroupList>
                       <VisualStateGroup x:Name="CommonStates">
                           <VisualState x:Name="Normal" >
                                <VisualState.Setters>
                                   <Setter Property="BorderColor"
                                           Value="{StaticResource LighterGreen}" />
                               </VisualState.Setters>
                           </VisualState>
                           <VisualState x:Name="Selected">
                               <VisualState.Setters>
                                   <Setter Property="BorderColor"
                                           Value="LightSkyBlue" />
                               </VisualState.Setters>
                           </VisualState>
                       </VisualStateGroup>
                   </VisualStateGroupList>
               </Setter>
           </Style>
    </ContentPage.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="250"/>
            <RowDefinition Height="250"/>
        </Grid.RowDefinitions> 
        <CollectionView SelectionMode="Multiple"
                        SelectionChanged="collectionview_coll_skills_SelectionChanged"
                        Margin="15,0,0,0"
                        Grid.Row="1"
                        VerticalScrollBarVisibility="Never" x:Name="collectionview_coll_skills">
            <CollectionView.ItemsLayout>
               <GridItemsLayout Orientation="Vertical" Span="3" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>                   
                    <ContentView>
                        <Grid>    
                            <Grid.RowDefinitions>
                                <RowDefinition Height="50"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="135"/>
                            </Grid.ColumnDefinitions>
                            <Frame Padding="8" Margin="0,0,0,5"  BackgroundColor="Transparent">
                                <Label FontSize="14" VerticalOptions="Center" HorizontalOptions="Center" Text="{Binding DisplayValue}"/>
                            </Frame>
                        </Grid>
                  </ContentView>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

您可以看到边框的颜色是正确的,但它不受我选择或取消选择某个项目的影响。
我希望你能帮我
谢谢你,
J型

31moq8wy

31moq8wy1#

我在这里给予你一些建议。

1.为什么边框颜色不变?

因为每次点击CollectionView中的项目时,您可以只选择DataTemplate中定义的外部ContentView。这样框架边框颜色就不会更改,因为它不会接收状态更改。因此,作为替代方法,您可以将TargetType设置为ContentView

2.如何设置背景色?

灰色背景色是项目被选中时的默认颜色。所以我认为最简单的避免方法是将ContentViewBackgroundcolor设置为白色。

<CollectionView.ItemTemplate>
    <DataTemplate>
        <ContentView BackgroundColor="White">

3.下面是我的完整代码,运行良好:

<ContentPage.Resources>
       <Style TargetType="ContentView">
           <Setter Property="VisualStateManager.VisualStateGroups">
               <VisualStateGroupList>
                   <VisualStateGroup x:Name="CommonStates">
                       <VisualState x:Name="Normal" >
                            <VisualState.Setters>
                                <Setter TargetName="myframe" Property="Frame.BorderColor"
                                    Value="Green" />
                                </VisualState.Setters>
                       </VisualState>
                       <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter TargetName="myframe" Property="Frame.BorderColor"
                                        Value="LightSkyBlue" />
                            </VisualState.Setters>
                       </VisualState>
                   </VisualStateGroup>
               </VisualStateGroupList>
           </Setter>
       </Style>
</ContentPage.Resources>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="250"/>
        <RowDefinition Height="250"/>
    </Grid.RowDefinitions>
    <CollectionView SelectionMode="Multiple"
                    ItemsSource="{Binding ItemCollection}"
                    Margin="15,0,0,0"
                    Grid.Row="1"
                    VerticalScrollBarVisibility="Never" x:Name="collectionview_coll_skills">
        <CollectionView.ItemsLayout>
           <GridItemsLayout Orientation="Vertical" Span="3" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <ContentView BackgroundColor="White">
                    <Grid >    
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="135"/>
                        </Grid.ColumnDefinitions>
                        <Frame Padding="8" Margin="0,0,0,5" x:Name="myframe"  BackgroundColor="Transparent">
                            <Label FontSize="14" VerticalOptions="Center" HorizontalOptions="Center" Text="{Binding DisplayValue}"/>

                        </Frame>
                    </Grid>                  
                </ContentView>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

    </Grid>

注意:在CollectionView的DataTemplate中,记得将Frame的名称设置为“myframe”,就像我们在ContentPage.Resources中使用的那样。
有关详细信息,请参阅Visual states
希望对你有用。

相关问题