弹出窗口中的全尺寸图像

Question

我使用带有自定义DataTemplate的ListBox，在这个DataTemplate中我有两个缩略图，当用户单击其中一个图像时，我需要显示一个带有全尺寸图像的弹出窗口（类似于JavaScript中的lightbox）。我试图在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;
    }
}

---

根据最新信息进行更新如果您不需要在单独的UserControl中查看视图（没有逻辑，只有控件的位置），您仍然可以使用该示例，但不要听SelectionChanged事件，而是听每个图像的Tap事件。

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

for Tap事件的事件看起来像

    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);
    }

如果您确实需要单独的UserControl你可以创建一个"ImageOverlay"视图，就像在我的自定义MessageBox帖子中一样。在您的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();
    }