Question

我有一个带有标签和图像的“收藏”视图。我希望使元素在单击时具有一个选中标记（而不是默认的行为，即更改背景颜色）。

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


    <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.

Answer 1

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

创建 CustomView ：

.overlaysection .overlay-content {
 position: relative;
 width: 100%;
 text-align: center;
 margin-top: 50px;
    min-width: 270px;
    float: left;
 }

int CustonView.xaml ：

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);
                                                                                        });
}

最终更改您的页面。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>

另一种方法就像zpouip所说，让<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>绑定Image属性，您应该在数据模型中添加IsVisible类型的属性，选择时，应更改添加的属性值，然后图像将显示

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

1 个答案: