CODEWITHSUNDEEP
c#.netwpf
MichaelP
MichaelP

Reputation: 2781

Draw icon overlay image in WPF

I build an image gallery in WPF, main window is simply a grid of images, i want to draw a zoom icon overlay at corner of image, and when user click on this icon, this icon will capture click event instead of image. I'm quite new to WPF, so please show me a good approach for this.

Here is xaml file

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

Upvotes: 0

Views: 2291

Answers (1)

kennyzx
kennyzx

Reputation: 13003

OK, download an icon, and add it to your project (Images\overlay.jpg). The DataTemplate now looks like this

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

Upvotes: 1

Related Questions