콘텐츠 컨트롤 및 버튼 플라이 아웃

Question

UWP 앱을 만들고 있는데 문제가 생겼습니다. 두 ComboBoxes과 TextBox 중 하나를 호스트하는 StackPanel을 만들고 싶습니다. Grid 안에 생성하면 앱에 표시 할 수 있으며 예상대로 작동합니다. 그러나 작은 화면 장치의 경우 StackPanel 대신 Button을 표시하고 StackPanel을 flyout으로 이동하려고합니다.

을 ContentControl에 추가하려고 시도한 다음 Flyout으로 설정했지만 작동하지 않습니다. Flyout은 플라이 아웃을 표시하려면 FlyoutPresenter 컨트롤이 필요합니다.

명명 충돌로 인해 여러 개의 StackPanel 컨트롤을 만들고 싶지 않지만 컨트롤이 한 면만 변경되어야하므로 사용자가 화면이나보기를 더 작게 변경해야 할 필요가 있습니다. 화면에는 동일한 내용이 표시됩니다.

누군가 나를 도와 줄 수 있습니까? 어쩌면 올바른 방향으로 나를 가리킬 수 있으므로 스스로 알아낼 수 있습니다. 어떤 도움을 주시면 감사하겠습니다. 덕분에

StackPanel 제어 :

<StackPanel Orientation="Vertical" 
       x:Name="PageOptionsPanel" 
       HorizontalAlignment="Right"> 
      <AppBarButton Label="Refresh" 
        Icon="Refresh" 
        Tapped="PageOptions_Tapped"/> 
      <RelativePanel Margin="10,0"> 
       <TextBlock Text="Sort by:" 
         Name="SortText" 
         RelativePanel.AlignVerticalCenterWithPanel="True" 
         Margin="0,0,5,0"/> 
       <ComboBox RelativePanel.RightOf="SortText" 
         x:Name="MSortingBox" 
         ItemsSource="{Binding EnSortList}" 
         RelativePanel.AlignVerticalCenterWithPanel="True" 
         SelectionChanged="MSortingBox_SelectionChanged" 
         Width="120"/> 
      </RelativePanel> 
      <RelativePanel Margin="10,0"> 
       <TextBlock Text="Country: " 
         Name="CountryText" 
         RelativePanel.AlignVerticalCenterWithPanel="True" 
         Margin="0,0,5,0"/> 
       <ComboBox RelativePanel.RightOf="CountryText" 
         x:Name="MCountryBox" 
         ItemsSource="{Binding EnCountryList}" 
         RelativePanel.AlignVerticalCenterWithPanel="True" 
         SelectionChanged="MCountryBox_SelectionChanged" 
         Width="120"/> 
      </RelativePanel> 
     </StackPanel> 

Flyout 제어 :

<Button> 
     <Button.Flyout> 
      <Flyout Placement="Left" 
        x:Name="MOptionsFlyout" 
        Content="{StaticResource PageOptionsFlyout}" 
        Opened="MOptionsFlyout_Opened"> 
      </Flyout> 
     </Button.Flyout> 
    </Button> 

Answer 1

질문을 올바르게 이해하면 페이지 크기 (전화 대 태블릿 용)에 따라 기본 레이아웃과 플라이 아웃 사이의 XAML을 공유하고 싶습니다. 레이아웃을 사용하여 DataTemplate을 만들고 페이지의 리소스 사전에 추가하여이 작업을 수행 할 수 있습니다. 그런 다음 여러 위치에서 참조 할 수 있습니다.

다음은이 코드입니다. 적응 형 트리거를 기반으로 조각을 숨기고 표시합니다.

<Page.Resources> 
    <DataTemplate x:Key="PageOptionsTemplate"> 
     <StackPanel 
        x:Name="PageOptionsPanel" 
        HorizontalAlignment="Right" 
        Orientation="Vertical"> 
      <AppBarButton 
         Icon="Refresh" 
         Label="Refresh" /> 
      <RelativePanel Margin="10,0"> 
       <TextBlock 
          Name="SortText" 
          Margin="0,0,5,0" 
          RelativePanel.AlignVerticalCenterWithPanel="True" 
          Text="Sort by:" /> 
       <ComboBox 
          x:Name="MSortingBox" 
          Width="120" 
          RelativePanel.AlignVerticalCenterWithPanel="True" 
          RelativePanel.RightOf="SortText"/> 
      </RelativePanel> 
      <RelativePanel Margin="10,0"> 
       <TextBlock 
          Name="CountryText" 
          Margin="0,0,5,0" 
          RelativePanel.AlignVerticalCenterWithPanel="True" 
          Text="Country: " /> 
       <ComboBox 
          x:Name="MCountryBox" 
          Width="120" 
          RelativePanel.AlignVerticalCenterWithPanel="True" 
          RelativePanel.RightOf="CountryText" 
          /> 
      </RelativePanel> 
     </StackPanel> 
    </DataTemplate> 
</Page.Resources> 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Button Name="OptionsFlyoutButton" Content="Show Me" Visibility="Collapsed"> 
     <Button.Flyout> 
      <Flyout> 
       <ContentControl ContentTemplate="{StaticResource PageOptionsTemplate}"/> 
      </Flyout> 
     </Button.Flyout> 
    </Button> 
    <ContentControl Name="OptionsInLine" Visibility="Visible" ContentTemplate="{StaticResource PageOptionsTemplate}" /> 

    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="320"/> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="OptionsInLine.Visibility" Value="Collapsed"/> 
        <Setter Target="OptionsFlyoutButton.Visibility" Value="Visible"/> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="720"/> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="1024"/> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
</Grid> 

DataTemplate을 응용 프로그램 수준 ResourceDictionary로 이동하여 여러 페이지간에 공유 할 수도 있습니다.

마지막으로 또 다른 옵션은 uwp 항목 템플릿을 사용하여 사용자 정의 컨트롤을 만드는 것입니다. 레이아웃을보다 잘 제어하고 로직을 캡슐화하고 여러 애플 리케이션간에 공유하고 싶다면이를 만드는 것이 좋습니다.

예를 들어 공유 DataTemplate이 가장 쉬운 경로입니다.

Answer 2

그냥 이렇게 :

<Button Content="Show Me"> 
     <Button.Flyout> 
      <Flyout> 
       <StackPanel 
        x:Name="PageOptionsPanel" 
        HorizontalAlignment="Right" 
        Orientation="Vertical"> 
        <AppBarButton 
         Icon="Refresh" 
         Label="Refresh" /> 
        <RelativePanel Margin="10,0"> 
         <TextBlock 
          Name="SortText" 
          Margin="0,0,5,0" 
          RelativePanel.AlignVerticalCenterWithPanel="True" 
          Text="Sort by:" /> 
         <ComboBox 
          x:Name="MSortingBox" 
          Width="120" 
          RelativePanel.AlignVerticalCenterWithPanel="True" 
          RelativePanel.RightOf="SortText"/> 
        </RelativePanel> 
        <RelativePanel Margin="10,0"> 
         <TextBlock 
          Name="CountryText" 
          Margin="0,0,5,0" 
          RelativePanel.AlignVerticalCenterWithPanel="True" 
          Text="Country: " /> 
         <ComboBox 
          x:Name="MCountryBox" 
          Width="120" 
          RelativePanel.AlignVerticalCenterWithPanel="True" 
          RelativePanel.RightOf="CountryText" 
          /> 
        </RelativePanel> 
       </StackPanel> 
      </Flyout> 
     </Button.Flyout> 
    </Button> 

을 내용 :

사용자가 버튼을 클릭 할 때마다 표시되는 자동 표시 플라이 아웃을 사용하면 코드가 필요하지 않습니다.

플라이 아웃에 컨텐츠를 추가하려면, 다른 요소가 있어야하고, 스택 패널이 들어가야합니다.

희망이 도움이됩니다.