Question

我在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

我只想让圈子成为可点击的，而不是下面的文本。有什么办法可以实现？请指导我。提前致谢。

Answer 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)
{

}

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

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

2 个答案: