代码之家 › 专栏 › 技术社区 › uwp

数据模板内的访问弹出对话框

template10 uwp-xaml uwp win-universal-app c#

uwp · 技术社区 · 8 年前

UI of Saavn App

我刚刚开始学习windows应用程序开发。比如我们叫它什么(对话框、内容对话框、消息对话框)?提前谢谢。

好的,我尝试了这个方法,因为我在contentpresenter中的数据模板中有我的数据(生成主详细视图),现在当用户单击一个图标时,弹出窗口应该会打开,并显示与列表中所选事件相关的数据。因为弹出对话框控件是在数据模板中定义的,所以在我的cs文件中它无法识别控件,所以我无法打开弹出对话框,所以我该如何实现这一点。

Xaml代码:

  <DataTemplate x:Key="DetailContentTemplate" x:DataType="data:Event">
        <Grid>

            <Grid.RowDefinitions>
                <RowDefinition Height="200" />
                <RowDefinition Height="50" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />

            </Grid.RowDefinitions>
            <Grid x:Name="Section2" Grid.Row="0">
                <Grid.Background>
                    <ImageBrush ImageSource="ms-appx:///Assets/8.JPG" Stretch="Fill" />
                </Grid.Background>


                <TextBlock MaxWidth="250"
                           Margin="36,62,34,68"
                           FontFamily="Baskerville Old Face"
                           FontSize="30"
                           Foreground="{ThemeResource ToggleButtonPressedForegroundThemeBrush}"
                           TextWrapping="WrapWholeWords"
                           d:LayoutOverrides="Width, LeftPosition, RightPosition, TopPosition, BottomPosition">
                    <Run Text="Gravitas Premier League" />

                </TextBlock>

            </Grid>
            <Grid x:Name="Content"
                  Grid.Row="1"
                  Margin="0,10,0,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0">
                    <RelativePanel>
                        <SymbolIcon x:Name="symbol"
                                    Margin="0,0,5,0"
                                    HorizontalAlignment="Left"
                                    RelativePanel.AlignLeftWithPanel="True"
                                    Symbol="Globe" />

                        <TextBlock HorizontalAlignment="Right"
                                   VerticalAlignment="Top"
                                   RelativePanel.RightOf="symbol"
                                   Style="{ThemeResource BaseTextBlockStyle}"
                                   Text="Category" />
                    </RelativePanel>
                </StackPanel>

                <StackPanel Grid.Column="1" HorizontalAlignment="Center">
                    <RelativePanel>
                        <SymbolIcon x:Name="symboll"
                                    Margin="0,0,5,0"
                                    HorizontalAlignment="Left"
                                    RelativePanel.AlignLeftWithPanel="True"
                                    Symbol="People" />

                        <TextBlock HorizontalAlignment="Right"
                                   VerticalAlignment="Top"
                                   RelativePanel.RightOf="symboll"
                                   Style="{ThemeResource BaseTextBlockStyle}"
                                   Text="SubCategory" />
                    </RelativePanel>
                </StackPanel>
                <StackPanel Grid.Column="2" HorizontalAlignment="Right">
                    <RelativePanel>
                        <SymbolIcon x:Name="symbllol"
                                    Margin="0,0,5,0"
                                    HorizontalAlignment="Left"
                                    RelativePanel.AlignLeftWithPanel="True"
                                    Symbol="Bullets" />

                        <TextBlock HorizontalAlignment="Right"
                                   VerticalAlignment="Top"
                                   RelativePanel.RightOf="symbllol"
                                   Style="{ThemeResource BaseTextBlockStyle}"
                                   Text="Rupee" />
                    </RelativePanel>
                </StackPanel>
            </Grid>
            <TextBlock Grid.Row="2"
                       HorizontalAlignment="Center"
                       Style="{ThemeResource ScenarioDescriptionTextStyle}"
                       Text="{x:Bind description}"
                       TextWrapping="WrapWholeWords" />

            <Grid Grid.Row="3">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>


                <SymbolIcon Grid.Column="0"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Symbol="Phone" />
                <SymbolIcon Grid.Column="1"
                            x:Name="People"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Symbol="People"
                            IsTapEnabled="True"
                            Tapped="ShowPopupOffsetClicked"
                            />



                <SymbolIcon Grid.Column="2"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Symbol="Mail" />

            </Grid>

        </Grid>
    </DataTemplate>

现在,当用户点击名称为People的符号,并使用可观察集合(如EventList)绑定必要的数据时,如何打开弹出窗口。

1 回复 | 直到 8 年前

Jay Zuo 8 年前

有很多方法可以像屏幕截图中那样实现UI。正如你所说 template10 Template10 在您的项目中。在模板10中,我们可以使用 ModalDialog 来实现这一点。这里我使用了一个最小模板10项目。

ModalBackground ModalDialog 这里使用的是由创建的根框架 Bootstrapper 自动,所以我们需要覆盖 CreateRootElement 附录xaml中。cs如:

public override UIElement CreateRootElement(IActivatedEventArgs e)
{
    var b = Current;
    var frame = new Windows.UI.Xaml.Controls.Frame();
    var nav = b.NavigationServiceFactory(BackButton.Attach, ExistingContent.Include, frame);

    //change background
    var background = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.Gray);
    background.Opacity = 0.2;

    return new Template10.Controls.ModalDialog
    {
        ModalBackground = background,
        DisableBackButtonWhenModal = true,
        Content = nav.Frame
    };
}

然后我们可以编辑Busy。xaml来实现屏幕截图中的面板。忙碌中。xaml,这是一个 UserControl 用作 ModalContent 属于 模态对话框 例如

<UserControl x:Class="T10Minimal.Views.Busy"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="using:T10Minimal.Views"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             d:DesignHeight="300"
             d:DesignWidth="400"
             mc:Ignorable="d">

    <Grid Width="300"
          HorizontalAlignment="Center"
          VerticalAlignment="Center"
          Background="White"
          CornerRadius="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            ...
        </Grid.RowDefinitions>
        <TextBlock Margin="20,0"
                   VerticalAlignment="Center"
                   FontSize="24"
                   Foreground="Black">
            Song Options
        </TextBlock>
        <Button Margin="12"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Click="CloseClicked"
                Foreground="Black"
                Style="{StaticResource TextBlockButtonStyle}">
            <SymbolIcon Symbol="Clear" />
        </Button>
        ...
    </Grid>
</UserControl>

绑定可能喜欢 BusyText 在原始控件中,可以将其类型更改为绑定数据的类型,还可以将 SetBusy 方法之后,您可以拨打 SetBusy(设置忙) 方法 ShowPopupOffsetClicked 方法打开“弹出窗口”。

模态对话框 创建为应用程序的根框架。如果您需要多个 模态对话框 ,您可以参考 Search (and Login) Sample 在GitHub上。