如何使UWP飛出全屏

Question

我正在為平板電腦創建一個應用程序，它將顯示一個充滿數據的網格。 我希望能夠單擊每個項目，然后將這些數據顯示在彈出窗口或彈出窗口或其他對話框中，以便像表格一樣對其進行編輯。 到目前為止，我使用的彈出框包含如下所示的堆棧面板：

            <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="10 0 10 0">
    <GridView ItemsSource="{x:Bind Activities}" ItemsPanel="{StaticResource ResourceKey=ItemsPanelTemplate}">
        <GridView.ItemContainerStyle>
            <Style TargetType="GridViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            </Style>
        </GridView.ItemContainerStyle>
        <GridView.ItemTemplate>
            <DataTemplate x:DataType="model:TimActivity">
                <Grid Tapped="GridView_Tapped">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="2*" />
                        <ColumnDefinition Width="1*" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="{x:Bind Path=Type, Converter={StaticResource TimActivityTypeToStringConverter}}" />
                    <TextBlock Grid.Column="1" Text="{x:Bind StartTime}" />
                    <TextBlock Grid.Column="2" Text="{x:Bind EndTime}" />
                    <TextBlock Grid.Column="3" Text="{x:Bind From}" />
                    <TextBlock Grid.Column="4" Text="{x:Bind To}" />
                    <TextBlock Grid.Column="5" Text="{x:Bind Comment}" />
                    <TextBlock Grid.Column="6" Text="{x:Bind Path=Chargeable, Converter={StaticResource BoolToStringConverter}}" />
                    <FlyoutBase.AttachedFlyout>
                        <Flyout Placement="Full">
                            <StackPanel>
                                        <TextBlock Text="Activity"/>
                                        <TextBox  Text="{x:Bind Path=Type, Converter={StaticResource TimActivityTypeToStringConverter}}" />
                                        <TextBlock Text="Start Time"/>
                                        <TextBox  Text="{x:Bind StartTime}" />
                                        <TextBlock Text="End Time"/>
                                        <TextBox  Text="{x:Bind EndTime}" />
                                        <TextBlock Text="From"/>
                                        <TextBox  Text="{x:Bind From}" />
                                        <TextBlock Text="To"/>
                                        <TextBox  Text="{x:Bind To}" />
                                        <TextBlock Text="Comment"/>
                                        <TextBox  Text="{x:Bind Comment}" />
                                        <TextBlock Text="Chargeable?"/>
                                        <TextBox  Text="{x:Bind Path=Chargeable, Converter={StaticResource BoolToStringConverter}}" />
                            </StackPanel>
                        </Flyout>
                    </FlyoutBase.AttachedFlyout>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Grid>

我將Placement設置為Full ，但它僅垂直拉伸彈出框，而不是全屏顯示。 你能告訴我一個嗎？ 彈出是對此的正確控制，並且b。 如何使其全屏顯示？

Answer 1

根據您的要求，我們建議您使用ConnectedAnimation進行處理。 有關更多步驟，請參考此代碼示例 。

private void TipsGrid_ItemClick(object sender, ItemClickEventArgs e)
{
    ConnectedAnimation animation = null;

    // Get the collection item corresponding to the clicked item.
    var container = collection.ContainerFromItem(e.ClickedItem) as GridViewItem;
    if (container != null)
    {
        // Stash the clicked item for use later. We'll need it when we connect back from the detailpage.
        _storedItem = Convert.ToInt32(container.Content);

        // Prepare the connected animation.
        // Notice that the stored item is passed in, as well as the name of the connected element. 
        // The animation will actually start on the Detailed info page.
        animation = collection.PrepareConnectedAnimation("forwardAnimation", _storedItem, "connectedElement");

    }

    SmokeGrid.Visibility = Visibility.Visible;
   // SmokeGrid.DataContext = e.ClickedItem;
    animation.TryStart(destinationElement);
}

更新資料

然后，我應該能夠編輯該表單中的所有字段，並在保存后將其反映在網格中。

您可以使模型繼承INotifyPropertyChanged ，然后使用雙向綁定將模型屬性與xaml代碼綁定。

<GridView Name="collection" ItemClick="Conllection_ItemClick" IsItemClickEnabled="True">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid x:Name="connectedElement"  Height="100" Width="100" Background="Orange">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <TextBlock Text="{Binding Title}" 
                           VerticalAlignment="Center"
                           HorizontalAlignment="Center"
                           TextAlignment="Center"/>
                <TextBlock Grid.Row="1" Text="{Binding Content,Mode=TwoWay}" 
                           VerticalAlignment="Center"
                           HorizontalAlignment="Center"
                           TextAlignment="Center"/>

            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

您可以在GridView ItemClick時將項目傳遞到彈出網格。

private void Conllection_ItemClick(object sender, ItemClickEventArgs e)
{
    ConnectedAnimation animation = null;
    var container = collection.ContainerFromItem(e.ClickedItem) as GridViewItem;
    if(container != null)
    {
        _storedItem = container.Content;
        animation = collection.PrepareConnectedAnimation("forwardAnimation", _storedItem, "connectedElement");
    }
    SmokeGrid.Visibility = Visibility.Visible;
   // pass the item DataContext.
    SmokeGrid.DataContext = e.ClickedItem;

    animation.TryStart(destinationElement);
}

迷你樣本已更新，您可以參考。

Answer 2

<Flyout Placement="Full">

即使它不會水平拉伸，這也是最好的方法。您還可以啟用LightDismissOverlayMode以獲得更多的“模態”選項體驗。

全屏彈出沒有任何意義，如果不添加其他退出按鈕，您甚至無法將其關閉。

但是，如果您確實想這樣做，則可以使用Popup ，它是FlyoutBase的一種更原始​​的產品，然后可以將其實際包含頁面的寬度和高度綁定到它，例如：

<Popup   Height="{Binding yourpage.ActualHeight}"  Width="{Binding yourpage.ActualWidth}" />
<Button Background="Orange" Height="50" Width=50 />

彈出窗口由其IsOpen屬性控制顯示，因此請進行相應調整。

從體系結構的角度來看，如果您使用與任何單擊的項目動態關聯的單個彈出按鈕，則更合適。

喜歡 ：

YourListview.ItemClicked+=(e,z)=>{ yourSingleFlyout.ShowAt(ElementClicked)};

另外，就像其他人建議的那樣，您可以使用Multiview系統，盡管我個人認為這種UI設計與Windows Phone一樣死。

此外，僅出於提供信息的原因，Microsoft最近在最新的api更新中擴展了Flyout實體的Placement Enum，但我認為沒有什么可能對您有所幫助。