데이터 템플릿 내에서 팝업 팝업으로 액세스

Question

방금 ​​창 응용 프로그램 개발을 배우기 시작했습니다. 우리가 무엇을 부르는 것처럼 (대화 상자, Contentdialogbox, 메시지 대화 상자)? 미리 감사드립니다.

좋아요. 사용자가 팝업을 열어야하는 아이콘을 클릭하고 해당 목록 내에서 선택한 이벤트와 관련된 데이터를 표시 할 때 contentpresenter (마스터 세부 정보보기 만들기) 내부의 데이터 템플릿에 내 데이터가 있으므로이 작업을 시도했습니다. 어떻게 팝업 대화 상자 컨트롤이 내 cs 파일에서 컨트롤을 인식하지 못합니다 그래서 팝업 대화 상자를 열 수 없습니다 datatemplate 내에서 정의 된 이후이 얻을 수 있습니다.

XAML 코드 :

<DataTemplate x:Key="DetailContentTemplate" x:DataType="data:Event"> 
     <Grid> 

      <Grid.RowDefinitions> 
       <RowDefinition Height="200" /> 
       <RowDefinition Height="50" /> 
       <RowDefinition Height="Auto" /> 
       <RowDefinition Height="*" /> 

      </Grid.RowDefinitions> 
      <Grid x:Name="Section2" Grid.Row="0"> 
       <Grid.Background> 
        <ImageBrush ImageSource="ms-appx:///Assets/8.JPG" Stretch="Fill" /> 
       </Grid.Background> 


       <TextBlock MaxWidth="250" 
          Margin="36,62,34,68" 
          FontFamily="Baskerville Old Face" 
          FontSize="30" 
          Foreground="{ThemeResource ToggleButtonPressedForegroundThemeBrush}" 
          TextWrapping="WrapWholeWords" 
          d:LayoutOverrides="Width, LeftPosition, RightPosition, TopPosition, BottomPosition"> 
        <Run Text="Gravitas Premier League" /> 

       </TextBlock> 

      </Grid> 
      <Grid x:Name="Content" 
        Grid.Row="1" 
        Margin="0,10,0,0"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="*" /> 
       </Grid.ColumnDefinitions> 
       <StackPanel Grid.Column="0"> 
        <RelativePanel> 
         <SymbolIcon x:Name="symbol" 
            Margin="0,0,5,0" 
            HorizontalAlignment="Left" 
            RelativePanel.AlignLeftWithPanel="True" 
            Symbol="Globe" /> 

         <TextBlock HorizontalAlignment="Right" 
            VerticalAlignment="Top" 
            RelativePanel.RightOf="symbol" 
            Style="{ThemeResource BaseTextBlockStyle}" 
            Text="Category" /> 
        </RelativePanel> 
       </StackPanel> 

       <StackPanel Grid.Column="1" HorizontalAlignment="Center"> 
        <RelativePanel> 
         <SymbolIcon x:Name="symboll" 
            Margin="0,0,5,0" 
            HorizontalAlignment="Left" 
            RelativePanel.AlignLeftWithPanel="True" 
            Symbol="People" /> 

         <TextBlock HorizontalAlignment="Right" 
            VerticalAlignment="Top" 
            RelativePanel.RightOf="symboll" 
            Style="{ThemeResource BaseTextBlockStyle}" 
            Text="SubCategory" /> 
        </RelativePanel> 
       </StackPanel> 
       <StackPanel Grid.Column="2" HorizontalAlignment="Right"> 
        <RelativePanel> 
         <SymbolIcon x:Name="symbllol" 
            Margin="0,0,5,0" 
            HorizontalAlignment="Left" 
            RelativePanel.AlignLeftWithPanel="True" 
            Symbol="Bullets" /> 

         <TextBlock HorizontalAlignment="Right" 
            VerticalAlignment="Top" 
            RelativePanel.RightOf="symbllol" 
            Style="{ThemeResource BaseTextBlockStyle}" 
            Text="Rupee" /> 
        </RelativePanel> 
       </StackPanel> 
      </Grid> 
      <TextBlock Grid.Row="2" 
         HorizontalAlignment="Center" 
         Style="{ThemeResource ScenarioDescriptionTextStyle}" 
         Text="{x:Bind description}" 
         TextWrapping="WrapWholeWords" /> 

      <Grid Grid.Row="3"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="*" /> 
       </Grid.ColumnDefinitions> 


       <SymbolIcon Grid.Column="0" 
          HorizontalAlignment="Center" 
          VerticalAlignment="Center" 
          Symbol="Phone" /> 
       <SymbolIcon Grid.Column="1" 
          x:Name="People" 
          HorizontalAlignment="Center" 
          VerticalAlignment="Center" 
          Symbol="People" 
          IsTapEnabled="True" 
          Tapped="ShowPopupOffsetClicked" 
          /> 



       <SymbolIcon Grid.Column="2" 
          HorizontalAlignment="Center" 
          VerticalAlignment="Center" 
          Symbol="Mail" /> 

      </Grid> 

     </Grid> 
    </DataTemplate> 

이제 사용자가 이름을 사람들과 함께하고 ObservableCollection에와 데이터의 필요에 바인딩 기호를 탭 때 팝업을 열어 어떻게 이벤트 목록을 말한다.

Answer 1

캡쳐 화면과 같이 UI를 구현하는 데는 여러 가지 방법이 있습니다. 질문에 template10을 추가 했으므로 프로젝트에 Template10을 사용하고 있다고 가정합니다. Template10에서는 ModalDialog을 사용하여이를 구현할 수 있습니다. 여기에서는 Minimal Template 10 프로젝트를 예로 사용합니다.

우선 화면 배경에 배경색이 보이게하려면 ModalBackground을 변경해야 할 수도 있습니다. 우리가 여기에 사용되는 ModalDialog 자동으로 Bootstrapper에 의해 생성 된 루트 프레임이다, 그래서 우리는 같은 App.xaml.cs를에 CreateRootElement를 오버라이드 (override)가 필요합니다 그리고 우리는 당신의 스크린 샷 패널을 구현하기 위해 Busy.xaml을 편집 할 수 있습니다

public override UIElement CreateRootElement(IActivatedEventArgs e) 
{ 
    var b = Current; 
    var frame = new Windows.UI.Xaml.Controls.Frame(); 
    var nav = b.NavigationServiceFactory(BackButton.Attach, ExistingContent.Include, frame); 

    //change background 
    var background = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.Gray); 
    background.Opacity = 0.2; 

    return new Template10.Controls.ModalDialog 
    { 
     ModalBackground = background, 
     DisableBackButtonWhenModal = true, 
     Content = nav.Frame 
    }; 
} 

. Busy.xaml에서 UserControl은 ModalContent으로 사용되며 ModalDialog입니다. 예를 들어,

<UserControl x:Class="T10Minimal.Views.Busy" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="using:T10Minimal.Views" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      d:DesignHeight="300" 
      d:DesignWidth="400" 
      mc:Ignorable="d"> 

    <Grid Width="300" 
      HorizontalAlignment="Center" 
      VerticalAlignment="Center" 
      Background="White" 
      CornerRadius="10"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
      ... 
     </Grid.RowDefinitions> 
     <TextBlock Margin="20,0" 
        VerticalAlignment="Center" 
        FontSize="24" 
        Foreground="Black"> 
      Song Options 
     </TextBlock> 
     <Button Margin="12" 
       HorizontalAlignment="Right" 
       VerticalAlignment="Top" 
       Click="CloseClicked" 
       Foreground="Black" 
       Style="{StaticResource TextBlockButtonStyle}"> 
      <SymbolIcon Symbol="Clear" /> 
     </Button> 
     ... 
    </Grid> 
</UserControl> 

바인딩은 원래 컨트롤의 BusyText을 것 같아서, 당신은 당신의 데이터 바인딩의 유형으로 유형을 변경하고 또한 SetBusy 방법을 변경할 수 있습니다. 이 후 ShowPopupOffsetClicked 메소드에서 SetBusy 메소드를 호출하여 '팝업'을 열 수 있습니다.

이것은 간단한 샘플 일 뿐이며 직접 구현할 수 있습니다. 샘플에서는 응용 프로그램의 루트 프레임으로 생성 된 ModalDialog을 사용했습니다. 하나 이상의 ModalDialog이 필요하면 GitHub의 Search (and Login) Sample을 참조하십시오.