WPF에서 아이콘 오버레이 이미지 그리기

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>

출처

2014-12-01 MichaelP

[findicons.com] (http://findicons.com/search/zoom)에서 아이콘을 선택하십시오. 그리고 윈도우의 XAML 코드를 보여줍니다. – kennyzx

나는 wpf에 내가 아주 새로운 것을 말했다. 그래서 나는 왜 여기에 물었다. 제게 제안 해주세요. – MichaelP

코드가 거의 비슷해 보이지만 오버레이의 레이아웃 (수평/수직 정렬, 크기, 불투명도, 여백) 만 조정하면됩니다. 이제 어떻게 생겼는지, 그리고 무엇을 달성하고 싶은지에 대한 스크린 샷을 게시 할 수 있습니까? – kennyzx

OK, 아이콘을 다운로드하고 프로젝트 (이미지 \ 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>

출처

2014-12-01 11:08:38 kennyzx

WPF에서 아이콘 오버레이 이미지 그리기

답변

관련 문제