Question

我有一个带有图像的列表视图，我需要在图像中有按钮和图像下方的标签，我尝试了相对和绝对布局，但不明白该怎么做。完成了一些代码，但按钮不会保持在与图像相关的中心位置，在加载图像之前，背景保持蓝色。

这是一个例子：

到目前为止做了什么：

代码：

<Grid Padding="0">
        <ListView x:Name="CoversListview" SeparatorVisibility="None" ItemsSource="{Binding Covers}" HasUnevenRows="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <!--left, top, right, bottom-->
                    <ViewCell>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="0"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <AbsoluteLayout  x:Name="ViewLayout" BindingContext="{Binding Item1}"  Padding="10,10,0,0" >
                                <StackLayout Orientation="Vertical" BackgroundColor="#01426A">
                                    <ffimageloading:CachedImage x:Name="CoverShow" Source="test.jpg" LoadingPriority="Highest" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="160" HeightRequest="234" Aspect="AspectFill">
                                        <ffimageloading:CachedImage.GestureRecognizers>
                                            <TapGestureRecognizer Tapped="TapGestureRecognizer_OnTapped">
                                            </TapGestureRecognizer>
                                        </ffimageloading:CachedImage.GestureRecognizers>
                                    </ffimageloading:CachedImage>
                                    <Label Text="Cover Name" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" FontSize="16" LineBreakMode="NoWrap" TextColor="White" FontAttributes="Bold"/>
                                </StackLayout>
                                <AbsoluteLayout x:Name="ViewControls" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All">
                                    <StackLayout  Orientation="Vertical" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="110" />
                                            </Grid.ColumnDefinitions>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="36" />
                                                <RowDefinition Height="36" />
                                            </Grid.RowDefinitions>
                                            <customRenders:MyButton x:Name="ShowButtonFrame"  BackgroundColor="#C8DBEF" TextColor="#01426A" ConfigurationItem ="{Binding .}"  Grid.Row="1" Text="Show"  CornerRadius="16" FontSize="12" BorderWidth="0" Clicked="Button_OnClicked_ShowItem1"/>
                                            <customRenders:MyButton x:Name="DownButtonFrame"  BackgroundColor="#C8DBEF" TextColor="#01426A" ConfigurationItem ="{Binding .}"  Grid.Row="0"  Text="Download"  CornerRadius="16" FontSize="12"  BorderWidth="0" Clicked="Button_OnClicked_DownItem1"/>
                                        </Grid>
                                    </StackLayout>
                                </AbsoluteLayout>
                            </AbsoluteLayout>

                            <AbsoluteLayout  x:Name="FrameItem" Grid.Column="2" IsVisible="{Binding IsVisible}" BindingContext="{Binding Item2}" Padding="0,10,0,0"  >
                                <StackLayout Orientation="Vertical" BackgroundColor="#01426A">
                                    <ffimageloading:CachedImage x:Name="CoverShow2" Source="test.jpg" LoadingPriority="Highest" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="160" HeightRequest="234" Aspect="AspectFill">
                                        <ffimageloading:CachedImage.GestureRecognizers>
                                            <TapGestureRecognizer Tapped="TapGestureRecognizer_OnTapped">
                                            </TapGestureRecognizer>
                                        </ffimageloading:CachedImage.GestureRecognizers>
                                    </ffimageloading:CachedImage>
                                    <Label Text="Cover Name" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" FontSize="16" LineBreakMode="NoWrap" TextColor="White" FontAttributes="Bold"/>
                                </StackLayout>
                                <AbsoluteLayout x:Name="ViewControls2" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All">
                                    <StackLayout  Orientation="Vertical" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="110" />
                                            </Grid.ColumnDefinitions>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="36" />
                                                <RowDefinition Height="36" />
                                            </Grid.RowDefinitions>
                                            <customRenders:MyButton x:Name="ShowButtonFrame3"  BackgroundColor="#C8DBEF" TextColor="#01426A" ConfigurationItem ="{Binding .}" Grid.Row="1" Text="Show" VerticalOptions="Center" CornerRadius="16" FontSize="10" BorderWidth="0" Clicked="Button_OnClicked_ShowItem2"/>
                                            <customRenders:MyButton x:Name="DownButtonFrame3"  BackgroundColor="#C8DBEF" TextColor="#01426A" ConfigurationItem ="{Binding .}" Grid.Row="0"  Text="Download"  CornerRadius="16" FontSize="10" HeightRequest="34" BorderWidth="0" Clicked="Button_OnClicked_DownItem2"/>
                                        </Grid>
                                    </StackLayout>
                                </AbsoluteLayout>

                            </AbsoluteLayout>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>

Answer 1

您应该在图像上添加TapGestureRecognizer并为其附加命令，如下所示：

<Grid>
    <Image Source="myImage.png">
        <Image.GestureRecognizers>
            <TapGestureRecognizer
                Command="{Binding ImageTapCommand}"
                CommandParameter="Id or ImageName or any Parameter goes here" />
        </Image.GestureRecognizers>
    </Image>    
    <Button Text="MyButton" IsVisible="{Binding ButtonVisibility, Mode=TwoWay}"  HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>

在ViewModel或Model中：

private bool _buttonVisibility;
public bool ButtonVisibility
{
    get { return _buttonVisibility; }
    set { _buttonVisibility = value; OnPropertyChanged(nameof(ButtonVisibility)); }
}

private Command<string> _ImageTapCommand;
public Command<string> ImageTapCommand
{
    get
    {
        return _ImageTapCommand ?? (_ImageTapCommand = new Command<string>((str) => ImageTapCommandExecute(str)));
    }
}

void ImageTapCommandExecute(string str)
{
    //Here str is whatever you passed with CommandParameter.
    //When your Image is tapped, button gets visible
    ButtonVisibility = true;                
}

这只是我为您想要实现的目标提供的粗略代码。愿这对你有所帮助。

图像里面的按钮

1 个答案: