在WPF中繪制圖標覆蓋圖像

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>