полноразмерное изображение во всплывающем окне

Question

Я использую ListBox с пользовательским DataTemplate, в этом DataTemplate у меня есть две миниатюры, когда пользователь нажимает на одно из этих изображений, мне нужно отобразить всплывающее окно с полноразмерным изображением (что-то вроде лайтбокса в JavaScript). Я попытался использовать элемент управления Popup в DataTemplate, но всплывающее окно расположено на текущем элементе 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>

Событие для событий 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», как в моем Custom MessageBox Post . В вашем представлении LookListItem подпишитесь на событие tap для обоих превью

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