Question

我在WPF中构建了一个图库，主窗口只是一个图像网格，我想在图像的一角绘制一个缩放图标叠加，当用户点击这个图标时，这个图标将捕获点击事件而不是图像。我对WPF很新，所以请告诉我一个很好的方法。

这是xaml文件

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Image Gallery" Height="350" Width="525" WindowState="Maximized">

    <Window.Resources>
        <ItemsPanelTemplate x:Key="ImageGalleryItemsPanelTemplate">
            <UniformGrid Columns="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></UniformGrid>
        </ItemsPanelTemplate>

        <DataTemplate x:Key="ListImageDataTemplate">
            <Grid HorizontalAlignment="Left" Width="230" Height="230">
                <Border Padding="5" Margin="10" BorderBrush="Orange">
                    <!--Bind Image Path in Image Control-->
                    <Image Source="{Binding ImagePath}" Stretch="Fill"  HorizontalAlignment="Center">
                        <!--View Large Image on Image Control Tooltip-->
                        <Image.ToolTip>
                            <StackPanel Background="Black">
                                <Image Source="{Binding ImagePath}" Stretch="Fill" HorizontalAlignment="Center" Height="200" Width="200"></Image>
                                <TextBlock Text="{Binding ImageName}" Foreground="White" Background="Black" Height="20" FontWeight="SemiBold" Margin="15,0,15,0"></TextBlock>
                            </StackPanel>
                        </Image.ToolTip>
                    </Image>
                </Border>

            </Grid>
        </DataTemplate>

    </Window.Resources>

    <Grid>
        <ListBox x:Name="lbImageGallery" Grid.Row="0" Grid.Column="0" ItemsSource="{Binding}" ItemsPanel="{DynamicResource ImageGalleryItemsPanelTemplate}" ItemTemplate="{StaticResource ListImageDataTemplate}">
            <ListBox.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black"/>
                    <GradientStop Color="#FF1E2A2F" Offset="1"/>
                </LinearGradientBrush>
            </ListBox.Background>
        </ListBox>
    </Grid>
</Window>

Answer 1

好的，下载一个图标，然后将其添加到您的项目中（Images \ overlay.jpg）。 DataTemplate现在看起来像这样

    <DataTemplate x:Key="ListImageDataTemplate">
        <Grid HorizontalAlignment="Left" Width="230" Height="230">
            <Border Padding="5" Margin="10" BorderBrush="Orange">
                <Grid>
                    <!--Bind Image Path in Image Control-->
                    <Image Source="{Binding ImagePath}" Stretch="Fill"  HorizontalAlignment="Center" />
                    <!--Show the overlay at the Bottom Right corner-->
                    <StackPanel Background="Black" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                        <Image Source="Images/overlay.jpg" Stretch="Fill" Height="40" Width="40"></Image>
                        <!--<TextBlock Text="{Binding ImageName}" Foreground="White" Background="Black" Height="20" FontWeight="SemiBold" />-->
                    </StackPanel>
                </Grid>
            </Border>
        </Grid>
    </DataTemplate>

在WPF中绘制图标叠加图像

1 个答案: