ポップアップでフルサイズの画像

Question

このDataTemplateでカスタムDataTemplateでListBoxを使用しています。ユーザーがこの画像の1つをクリックすると2つのサムネイルが表示されます。フルサイズの画像でポップアップを表示する必要があります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

これを行う方法はいくつかあります。私はあなたが少しのコードの背後にこれを行う方法を示します。背後にあるあなたのコードで

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

：あなたのXAMLで

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

LATEST INFO あなたが別のユーザーコントロールでビューを必要としない場合に基づく

---

UPDATE（ロジックなし、コントロールの配置のみ）では、引き続きこの例を使用できますが、SelectionChangedイベントをリッスンするのではなく、Tap Even各画像の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> 

あなたはあなたが私のCustom MessageBox Postによく似た「ImageOverlay」ビューを作成することができ、別のUserControl が必要な場合はタップイベントが

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

ようになりますためのイベント。あなたの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(); 
    }