C# 内容控制和按钮弹出按钮

我正在制作一个UWP应用程序，我遇到了一个问题。我想制作一个

堆栈面板

，其中包含两个

组合框

和一个

文本框

。如果我在

网格

中创建它，并且它按预期工作，我可以在应用程序中显示它。但是对于较小屏幕的设备，我希望显示一个

按钮

来代替

堆叠面板

，并将

堆叠面板

移动到按钮

弹出按钮

我尝试将

堆栈面板

添加到

内容控件

，然后将其设置为

弹出按钮

，但它不起作用<代码>弹出按钮需要一个

弹出按钮

控件才能显示弹出按钮

由于命名冲突，我不想创建多个

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>

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

只要这样做：

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

使用时，用户每次单击按钮都会显示自动显示弹出按钮，无需任何代码

但要向弹出按钮添加内容，需要在其中添加另一个元素，然后stackpanel进入其中

希望这对您有所帮助。
只需执行以下操作：

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



使用时，用户每次单击按钮都会显示自动显示弹出按钮，无需任何代码

但要向弹出按钮添加内容，需要在其中添加另一个元素，然后stackpanel进入其中

希望这对您有所帮助。
如果我正确理解了您的问题，您希望根据页面大小（手机与平板电脑）在主页和弹出按钮之间共享选项布局的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项模板）。我建议，如果你需要对布局进行更多控制，也要封装逻辑，并在多个应用程序之间共享它，那么就创建一个这样的布局

例如，共享数据模板是最简单的路径。
如果我正确理解了您的问题，您希望根据页面大小（手机与平板电脑）在主页和弹出按钮之间共享选项布局的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项模板）。我建议，如果你需要对布局进行更多控制，也要封装逻辑，并在多个应用程序之间共享它，那么就创建一个这样的布局

例如，共享数据模板是最简单的路径。
很遗憾，您不理解我的问题，我可以生成弹出按钮，但我需要此弹出按钮作为另一个控件，以便在其他地方显示它。事实上，我希望一个
stackpanel
能够进入弹出型按钮和弹出型按钮，就像它是同一个控件一样工作。不幸的是，你不理解我的问题，我可以生成弹出型按钮，但我需要这个弹出型按钮也作为一个不同的控件，以便我可以在其他地方显示它。事实上，我希望一个
stackpanel
能够进入弹出型按钮和弹出型按钮，就像是同一个控件一样工作。是的，谢谢你的回答。我已经弄明白了，这是正确的方法，就像我用同样的方法做的一样。太好了，很高兴这有帮助。是的，谢谢你的回答。我已经弄明白了，这是正确的方法，就像我用同样的方法做的一样。太好了，很高兴这有帮助。