XAML 为什么框架不改变它的背景?

r55awzrz  于 2023-04-18  发布在  其他
关注(0)|答案(1)|浏览(170)

我在首页有一个CollectionView,其中CollectionView元素由一个作为容器的Frame和其他元素组成(代码见下),我想实现collectionView选中Frame改变Frame的颜色**。但是VisualStateManager“不起作用”,这种方法如何在选中时添加Frame animation
我的ContentPage.资源代码:

<ContentPage.Resources>
        <Style TargetType="Frame">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Red" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>

我的收藏查看代码:

<CollectionView.ItemTemplate>
                <DataTemplate>
                    <Frame Margin="10, 10, 10, 0"
                           HeightRequest="100"
                           MinimumHeightRequest="95"
                           Padding="13" 
                           CornerRadius="20"
                           BackgroundColor="DodgerBlue"
                           BorderColor="Transparent">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Label 
                                Text="{Binding Title}"
                                FontSize="19" 
                                TextColor="White"
                                FontAttributes="Bold"/>
                            <Label 
                                Margin="0, 2, 0, 0"
                                Grid.Row="1"
                                Text="{Binding Description}"
                                FontSize="16" 
                                TextColor="White"/>
                            <Label 
                                Margin="0, 10, 0, 0"
                                Grid.Row="2"
                                Text="{Binding CreationTime, Converter={converters:TimePrettifyerConverter}}"
                                FontSize="12"
                                TextColor="White"/>
                        </Grid>
                    </Frame>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
dm7nw8vv

dm7nw8vv1#

更新

我做了一个演示在MVVM的方式与一个新的按钮添加一个新的项目,每次我点击按钮。
这是我的MainPage.xaml文件(我在底部添加了一个按钮来添加新项):

<StackLayout>      
    <CollectionView ItemsSource="{Binding ItemCollection}" SelectionMode="Single" HeightRequest="600">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Border  Margin="10, 10, 10, 0"
                        HeightRequest="100"
                        MinimumHeightRequest="95"
                        Padding="13"
                        Stroke="Transparent">
                            <Border.StrokeShape>
                                    <RoundRectangle CornerRadius="20,20,20,20"/>
                            </Border.StrokeShape>                     
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <Label 
                            Text="{Binding Title}"
                            FontSize="19" 
                            TextColor="White"
                            FontAttributes="Bold"/>
                        <Label 
                            Margin="0, 2, 0, 0"
                            Grid.Row="1"
                            Text="{Binding Description}"
                            FontSize="16" 
                            TextColor="White"/>
                        <Label 
                            Margin="0, 10, 0, 0"
                            Grid.Row="2"
                            Text="{Binding CreationTime}"
                            FontSize="12"
                            TextColor="White"/>
                    </Grid>
                </Border>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

    <Button Text="click me" Command="{Binding ClickCommand}"   />
</StackLayout>

不要忘记在MainPage.cs文件中设置BindingContext:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        this.BindingContext = new MainPageViewModel();
    }
...

这是我的MainPageViewModel,我定义了一个ItemCollection,CollectionView绑定到它,我还定义了按钮的ClickCommand,每次点击按钮都会在CollectionView中添加一个新的item。

public class MainPageViewModel
{
    public ObservableCollection<Item> ItemCollection { get; set; }= new ObservableCollection<Item>();

    // each time i clicked the button, ClickCommand will execute to add a new item
    public Command ClickCommand
    {
        get
        {
            return new Command(() =>
            {
                int n = ItemCollection.Count + 1;
                ItemCollection.Add(new Item
                {
                    Title = "Title" + n.ToString(),
                    CreationTime = "CreationTime" + n.ToString()
                });
            });
        }
    }
    //just add some test code here
    public MainPageViewModel()
    {
        ItemCollection.Add(new Item
        {
            Title = "Title1",
            CreationTime = "CreationTime1"
        });
        ......
        ItemCollection.Add(new Item
        {
            Title = "Title5",
            CreationTime = "CreationTime5"
        });
    }
}

这是Item.cs,为了方便起见,我没有使用CreationTime的Converter。

public class Item
{
    public string Title { get; set; }
    public string CreationTime {get;set;}

    public Item()
    {
    }
}

下面是我捕获的gif:

======
这是因为您在DataTemplate中设置了Frame BackgroundColor。所以如果我们在参考资料中使用VisualState,最好不要在任何其他地方设置Property。为了解决这个问题,也许您可以设置一个正常状态(这次我们使用Border):

<Style TargetType="Border"> 
......
        <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" >
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="DodgerBlue" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Red" />
                        </VisualState.Setters>
                    </VisualState>
        </VisualStateGroup>

并使用Border而不是Frame:

<CollectionView.ItemTemplate>
    <DataTemplate>
        <Border  Margin="10, 10, 10, 0"
                HeightRequest="100"
                MinimumHeightRequest="95"
                Padding="13"
                Stroke="Transparent">
                    <Border.StrokeShape>
                            <RoundRectangle CornerRadius="20,20,20,20"/>
                    </Border.StrokeShape>                     
            <Grid>
                <Grid.RowDefinitions>

希望对你有用。

相关问题