在彈出的全尺寸圖像

Question

我使用ListBox與自定義DataTemplate，在這個DataTemplate我有兩個縮略圖，當用戶點擊這些圖像之一，我需要顯示一個全尺寸的圖像彈出（類似燈箱在JavaScript中）。我試圖在DataTemplate中使用Popup控件，但彈出窗口定位到ListBox上的當前元素，而不是在屏幕中居中，而且我無法使其成爲模態。我也嘗試使用Coding4Fun工具包，但是我找不到任何文檔或者沒有任何幫助。

這裏是列表框的代碼：

<ListBox MaxHeight="600" ItemsSource="{Binding Items}" x:Name="LooksList" u:ScrollViewerMonitor.AtEndCommand="{Binding FetchMoreDataCommand}" d:LayoutOverrides="GridBox" BorderThickness="0" Margin="0,0,0,62"> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <views:LookListItem /> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 

和看法：LookListItem：

<Grid x:Name="LayoutRoot"> 
    <StackPanel x:Name="MainPanel" Margin="0,53,0,0" Orientation="Horizontal"> 
     <StackPanel x:Name="PhotosPanel" Margin="20,11,0,0" Width="198" Height="126" HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal"> 
      <Border BorderThickness="3" BorderBrush="White" Margin="0" HorizontalAlignment="Left" Width="93" Height="126"> 
       <Image Source="{Binding Photo1.Thumb}" VerticalAlignment="Center" Tap="Image_Tap" /> 
      </Border> 
      <Border BorderThickness="3" BorderBrush="White" Margin="12,0,0,0" HorizontalAlignment="Right" Width="93" Height="126"> 
       <Image Source="{Binding Photo2.Thumb}" VerticalAlignment="Center" /> 
      </Border> 
     </StackPanel> 
    </StackPanel> 
</Grid> 

照片1和照片2可點擊以及點擊後它應該是一個彈出窗口。

在此先感謝！

Answer 1

有幾種方法可以去做這件事。我將展示如何使用一些代碼來完成此操作。

在您的XAML：

<Grid> 
    <ListBox ItemsSource="{Binding MyItems}" ItemTemplate="{Binding MyTemplate}" 
      SelectionChanged="ListBox_SelectionChanged"/> 
    <Popup x:Name="Popup"> 
     <Grid> 
      <ToggleButton Content="X" 
          IsChecked="{Binding IsOpen, ElementName=Popup, Mode=TwoWay}" 
          HorizontalAlignment="Right" VerticalAlignment="Top"/> 
      <Image x:Name="PopupImage"/> 
     </Grid> 
    </Popup> 
</Grid> 

在後面的代碼：

private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs args) 
{ 
    ListBox listBox = (ListBox)sender; 
    MyImageObject obj = (MyImageObject)listBox.SelectedItem; 
    ImagePopup.Source = MyImageObjct.LargeImageSource; 
    Popup.IsOpen = true; 
    // Unselect item so user can "reselect" it -- If you need item later, save it somewhere 
    listBox.SelectedItem = null; 
} 

// Handle the back key button to close the popup 
protected override void OnBackKeyPress(CancelEventArgs e) 
{ 
    if(Popup.IsOpen) 
    { 
     Popup.IsOpen = false; 
     e.Cancel = true; 
    } 
} 

---

更新基於最新信息 如果你不需要在一個單獨的用戶控件您的視圖（沒有邏輯，只有控件的位置），你仍然可以使用這個例子，但是不要聽SelectionChanged事件，而要聽Tap t的每個圖像。

<ListBox MaxHeight="600" ItemsSource="{Binding Items}" x:Name="LooksList" 
     BorderThickness="0" Margin="0,0,0,62"> 
<ListBox.ItemTemplate> 
    <DataTemplate> 
     <StackPanel x:Name="MainPanel" Margin="0,53,0,0" Orientation="Horizontal"> 
      <StackPanel x:Name="PhotosPanel" Margin="20,11,0,0" Width="198" Height="126" HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal"> 
       <Border BorderThickness="3" BorderBrush="White" Margin="0" HorizontalAlignment="Left" Width="93" Height="126"> 
        <Image Source="{Binding Photo1.Thumb}" VerticalAlignment="Center" Tap="Image1_Tap" /> 
       </Border> 
       <Border BorderThickness="3" BorderBrush="White" Margin="12,0,0,0" HorizontalAlignment="Right" Width="93" Height="126"> 
        <Image Source="{Binding Photo2.Thumb}" VerticalAlignment="Center" 
          Tap="Image2_Tap" /> 
       </Border> 
      </StackPanel> 
     </StackPanel> 
    </DataTemplate> 
</ListBox.ItemTemplate> 

爲點擊事件看起來像

private void Image1_Tap(object sender, GestureEventArgs gestureEventArgs) 
    { 
     MyImageObject obj = ((FrameworkElement)sender).DataContext as MyImageObject; 
     // This is the event for Image1 Thumb, so show the Image1 Large 
     ShowPopup(obj.Photo1.Large); 
    } 

如果您還需要一個單獨的用戶控件 你可以在我的Custom MessageBox Post多創建一個「ImageOverlay」的看法一樣的事件。在你LookListItem視圖訂閱點擊事件的兩個拇指

<Grid x:Name="LayoutRoot"> 
<StackPanel x:Name="MainPanel" Margin="0,53,0,0" Orientation="Horizontal"> 
    <StackPanel x:Name="PhotosPanel" Margin="20,11,0,0" Width="198" Height="126" HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal"> 
     <Border BorderThickness="3" BorderBrush="White" Margin="0" HorizontalAlignment="Left" Width="93" Height="126"> 
      <Image Source="{Binding Photo1.Thumb}" VerticalAlignment="Center" Tap="Thumb1_Tap" /> 
     </Border> 
     <Border BorderThickness="3" BorderBrush="White" Margin="12,0,0,0" HorizontalAlignment="Right" Width="93" Height="126"> 
      <Image Source="{Binding Photo2.Thumb}" VerticalAlignment="Center" Tap="Thumb2_Tap" /> 
     </Border> 
    </StackPanel> 
</StackPanel> 

在點擊事件顯示ImageOverlay控制

private void Thumb1_Tap(object sender, GestureEventArgs gestureEventArgs) 
    { 
     ShowOverlay(Photo1.Large); 
    } 

    private void Thumb2_Tap(object sender, GestureEventArgs gestureEventArgs) 
    { 
     ShowOverlay(Photo2.Large); 
    } 

    private void ShowOverlay(ImageSource source) 
    { 
     ImageOverlay overlay = new ImageOverlay(); 
     overlay.ImageSource = source; 
     overlay.Show(); 
    }