2014-12-01 2 views
0

Я построю галерею изображений в WPF, главное окно - это просто сетка изображений, я хочу нарисовать оверлей изображения масштабирования в углу изображения, и когда пользователь нажмет на этот значок, этот значок будет захватить событие клика вместо изображения. Я новичок в 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> 
+1

Выберите значок из [findicons.com] (http://findicons.com/search/zoom). И покажите код XAML вашего окна. – kennyzx

+0

Я сказал, что я совершенно новый для wpf, вот почему я спросил здесь. поэтому, пожалуйста, дайте мне предложение. – MichaelP

+0

Ваш код выглядит почти правильно, вам нужно только отрегулировать расположение наложения (его горизонтальное/вертикальное выравнивание, размер, непрозрачность, маржа). Так можете ли вы опубликовать скриншот того, как он выглядит сейчас и чего вы хотите достичь? – kennyzx

ответ

1

OK, загрузить иконку, и добавить его в свой проект (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> 
Смежные вопросы