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

如果我理解您的问题，您希望根据页面大小（手机与平板电脑）在主页和弹出窗口之间共享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>

得到这个：

使用时，只要用户点击按钮，就会显示自动显示弹出按钮，无需任何代码。

但要向该弹出按钮添加内容，您需要在其中包含另一个元素，然后堆叠面板进入其中。

希望这会对你有所帮助。

内容控制和按钮弹出窗口

2 个答案: