如何在 uwp 应用程序中仅使部分 gridview 项目可点击？

Posted 2023-04-13

【中文标题】如何在 uwp 应用程序中仅使部分 gridview 项目可点击？

【英文标题】：How to make only a part of gridview item clickable in uwp application?

【发布时间】：2020-03-28 02:25:44

【问题描述】：

我在我的 uwp 应用程序中使用了一个网格视图控件，每个网格视图项都包含一个网格和一个堆栈面板。我只想让网格成为可点击的，而不是在完整的网格视图项上。 这是我的网格视图代码

<GridView 
    Grid.Row="1" 
    ItemsSource="x:Bind ViewData" 
    ScrollViewer.VerticalScrollBarVisibility="Hidden" 
    Margin="130,40,130,40">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="data:ViewArr">
            <StackPanel  Margin="50,25,50,25" >
                <Grid Height="120" Width="120">
                    <Image 
                    Source="assets/images/icons/check_my_blue.png" 
                    Height="40" 
                    Width="40" 
                    Canvas.ZIndex="99" 
                    Margin="80,0,0,80">
                    </Image>
                    <Canvas>
                        <Ellipse 
                        Height="120" 
                        Width="120" 
                        Fill ="x:Bind profile_color , FallbackValue='#00000'" 
                        StrokeThickness="3" 
                        Stroke="Black" >
                        </Ellipse>
                    </Canvas>
                    <TextBlock 
                    Text="x:Bind profile_name" 
                    VerticalAlignment="Center" 
                    HorizontalAlignment="Center"
                    FontSize="28"
                    Foreground="White">
                    </TextBlock>
                </Grid>
                <StackPanel>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
                        <TextBlock Text="x:Bind first_name" FontSize="16" FontWeight="Bold" ></TextBlock>
                        <TextBlock Text="x:Bind last_name" FontSize="16" FontWeight="Bold"></TextBlock>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
                        <TextBlock Text="Today - " FontSize="14" FontWeight="Bold" Foreground="Gray" Margin="0,0,5,0"></TextBlock>
                        <TextBlock Text="0" FontSize="14" Foreground="Gray"></TextBlock>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
                        <TextBlock Text="Previous Tasks - " FontSize="14" FontWeight="Bold" Foreground="Gray" Margin="0,0,5,0"></TextBlock>
                        <TextBlock Text="0" FontSize="14" Foreground="Gray"></TextBlock>
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

它创造了这样的东西。

https://i.stack.imgur.com/0UmIx.png

我只想制作可点击的圆圈，而不是下方的文字。 有没有办法做到这一点？请指导我。提前致谢。

【参考方案1】：

如何在 uwp 应用程序中只让部分 gridview 项目可点击？

根据您的要求，您可以将 GridView IsItemClickEnabled 属性设置为 false，然后侦听 Grid Tapped 事件，如下所示。

<GridView IsItemClickEnabled="False" >
    <GridView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <Grid Tapped="Grid_Tapped"
                    Width="30"
                    Height="30"
                    VerticalAlignment="Center"
                    Background="Red"
                    CornerRadius="15"
                    />
                <StackPanel VerticalAlignment="Center" Orientation="Vertical">
                    <TextBlock VerticalAlignment="Center" Text="NicoName" />
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

private void Grid_Tapped(object sender, TappedRoutedEventArgs e)

【参考方案2】：

试试这个。

<GridView
    Grid.Row="1"
    Margin="130,40,130,40"
    IsItemClickEnabled="False"
    ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <GridView.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="50,25,50,25">
                <Button
                    BorderBrush="Transparent"
                    BorderThickness="0"
                    Command="Binding MyCommandName"
                    Foreground="Transparent">
                    <Grid Width="120" Height="120">
                        <Image
                            Width="40"
                            Height="40"
                            Margin="80,0,0,80"
                            Canvas.ZIndex="99"
                            Source="assets/images/icons/check_my_blue.png" />
                        <Canvas>
                            <Ellipse
                                Width="120"
                                Height="120"
                                Fill="x:Bind profile_color, FallbackValue='#00000'"
                                Stroke="Black"
                                StrokeThickness="3" />
                        </Canvas>
                        <TextBlock
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            FontSize="28"
                            Foreground="White"
                            Text="x:Bind profile_name" />
                    </Grid>
                </Button>
                <StackPanel>
                    <StackPanel
                        Margin="0,10,0,0"
                        HorizontalAlignment="Center"
                        Orientation="Horizontal">
                        <TextBlock
                            FontSize="16"
                            FontWeight="Bold"
                            Text="x:Bind first_name" />
                        <TextBlock
                            FontSize="16"
                            FontWeight="Bold"
                            Text="x:Bind last_name" />
                    </StackPanel>
                    <StackPanel
                        Margin="0,10,0,0"
                        HorizontalAlignment="Center"
                        Orientation="Horizontal">
                        <TextBlock
                            Margin="0,0,5,0"
                            FontSize="14"
                            FontWeight="Bold"
                            Foreground="Gray"
                            Text="Today - " />
                        <TextBlock
                            FontSize="14"
                            Foreground="Gray"
                            Text="0" />
                    </StackPanel>
                    <StackPanel
                        Margin="0,10,0,0"
                        HorizontalAlignment="Center"
                        Orientation="Horizontal">
                        <TextBlock
                            Margin="0,0,5,0"
                            FontSize="14"
                            FontWeight="Bold"
                            Foreground="Gray"
                            Text="Previous Tasks - " />
                        <TextBlock
                            FontSize="14"
                            Foreground="Gray"
                            Text="0" />
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>