用户单击集合视图时如何显示图像答案

【问题标题】：How to show image when user click on collection view用户单击集合视图时如何显示图像
【发布时间】：2019-07-04 14:12:02
【问题描述】：

我有一个带有标签和图像的 Collection 视图。我想让元素在单击时具有复选标记（而不是默认行为，即更改背景颜色）。

使用下面的代码，当用户点击一行时，背景颜色变为灰色。但是，即使我为图像定义了一个设置器，带有复选标记的图像也不会显示。


    <ContentPage.Resources>
            <ResourceDictionary>
                <Style TargetType="Grid">
                    <Setter Property="VisualStateManager.VisualStateGroups">
                        <VisualStateGroupList>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Property="BackgroundColor" Value="LightGray" />
                                        <Setter x:DataType="Image" Property="Image.Source" Value="icon_check.png" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateGroupList>
                    </Setter>
                </Style>            
            </ResourceDictionary>
        </ContentPage.Resources>


    //

    <CollectionView 
                                    x:Name="collectionview_cadastronotificacao_tipoocorrencia"
                                    ItemsSource="{Binding TipoOcorrencia}" 

                                    SelectionMode="Multiple" 
                                    BackgroundColor="White" 
                                    HorizontalOptions="Center" 
                                    VerticalOptions="Center"
                                    SelectionChanged="CollectionView_SelectionChanged" >

                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <Grid Padding="10" >

                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />                                    
                                    </Grid.RowDefinitions>

                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />                                    
                                    </Grid.ColumnDefinitions>

                                    <Image 
                                       Grid.RowSpan="1"
                                       Grid.Column="2" />

                                    <Label Grid.Column="0"
                                           Text="{Binding Descricao}"
                                           FontAttributes="Bold" FontSize="Small"/>

                                </Grid>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>
    ```

If I change `<Setter x:DataType="Image" Property="Image.Source"` to `<Setter x:DataType="Image" Property="Source"`, an `InvalidCastException` is thrown.

【问题讨论】：

我使用你的 xaml 代码运行，但它会抛出错误，并且通常名为“CommonStates”的视觉状态组具有三种视觉状态：“正常”、“禁用”、“聚焦”，有你的定义你自己的视觉状态？如果可以，您可以分享您的测试项目
@LeoZhu-MSFT 它会抛出什么错误？不，我还没有定义任何自定义视觉状态。我只使用 Visual 和 Material。我不能分享我正在做的这个项目。我会看看我是否可以建立一个复制品来分享。
@LeoZhu-MSFT 我已经添加了一些细节。
尝试更改图像上的 IsVisible 属性而不是 Source 属性。当然，在这种情况下 Source 应该在 "icon_check.png" 之前设置。
我刚试过，也没用。

标签： c# xaml xamarin.forms

【解决方案1】：

你可以参考我同事提供的答案：

创建一个CustomView：

public partial class CustomView : ContentView
 {
   public CustomView()
    {
    InitializeComponent();
    }

public string CustomImageSource
{
    set => SetValue(CustomImageSourceProperty, value);
    get => (string)GetValue(CustomImageSourceProperty);
}
public readonly static BindableProperty CustomImageSourceProperty = BindableProperty.Create(nameof(CustomImageSource), 
                                                                                        typeof(string), 
                                                                                        typeof(CustomView), 
                                                                                        defaultValue: string.Empty,
                                                                                        propertyChanged: (bindableObject, oldValue, newValue) =>
                                                                                        {
                                                                                            ((CustomView)bindableObject).MyImage.Source = ImageSource.FromFile((string)newValue);
                                                                                        });
}

int CustonView.xaml：

<ContentView.Content>
  <Grid Padding="10" >
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <Image x:Name="MyImage" Grid.RowSpan="1" Grid.Column="2" />
    <Label Grid.Column="0" Text="{Binding Descricao}" FontAttributes="Bold" FontSize="Small"/>
  </Grid>
</ContentView.Content>

最后更改您的 page.xaml：

<ContentPage.Resources>
 <ResourceDictionary>
    <Style TargetType="local:CustomView">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="LightGray" />
                            <Setter Property="CustomImageSource" Value="leftcircle.png" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<CollectionView x:Name="collectionview_cadastronotificacao_tipoocorrencia" 
                ItemsSource="{Binding TipoOcorrencia}"  
                SelectionMode="Multiple"  
                BackgroundColor="White"  
                HorizontalOptions="Center"  
                VerticalOptions="Center" 
                SelectionChanged="CollectionView_SelectionChanged" >

    <CollectionView.ItemTemplate>
        <DataTemplate>
            <local:CustomView/>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>

另一种方式就像zpouip所说，让Image绑定IsVisible属性，你应该在你的数据模型中添加一个bool类型的属性，当你选择时，你应该改变添加的属性值，然后图像将显示

【讨论】：