内容控件和按钮弹出窗口

Question

我正在制作一个 UWP 应用程序，但遇到了一个问题。我想制作一个 StackPanel 来承载两个 ComboBoxes 和一个 TextBox。如果我在 Grid 中创建它并且它按预期工作，我可以在应用程序中显示它。但是对于较小的屏幕设备，我想显示 Button 代替 StackPanel 并将 StackPanel 移动到按钮 flyout.

我尝试将 StackPanel 添加到 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

只需这样做：

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

得到这个：

使用时，您将获得一个自动显示弹出窗口，只要用户单击该按钮就会显示该弹出窗口，无需代码。

但是要向该弹出窗口添加内容，您需要在其中添加另一个元素，然后将堆栈面板放入其中。

希望对您有所帮助。

Answer 2

如果我对您的问题的理解正确，您希望根据页面大小（phone 与平板电脑）在主页和弹出窗口之间共享选项布局的 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 是最简单的路径。

内容控件和按钮弹出窗口

Content Control and Button Flyout

c#

uwp

uwp-xaml