Question

UI of Saavn App

我刚刚开始学习Windows应用开发。就像我们所说的那样（一个对话框，Contentdialogbox，Message Dialog）？提前谢谢。

好的，我试过这个，因为我现在在contentpresenter（制作主要详细信息视图）中的数据窗口中有我的数据，当用户点击弹出窗口应打开的图标时，还显示与该列表中选择的该事件相关的数据。我如何实现这一点，因为弹出对话框控件是在datatemplate中定义的，因此在我的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且带有observablecollection的数据的必要绑定时，如何点击符号EventList，打开弹出窗口。

Answer 1

在屏幕截图中有很多方法可以实现UI。由于您在问题中添加了template10，我认为您在项目中使用了Template10。在Template10中，我们可以使用ModalDialog来实现这一点。这里我使用最小模板10项目。

首先，我们可能需要更改ModalBackground以使背景颜色与截图中的颜色相同。由于我们在此处使用的ModalDialog是Bootstrapper自动创建的根框架，因此我们需要在App.xaml.cs中覆盖CreateRootElement，如：

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以在屏幕截图中实现面板。在Busy.xaml中，UserControl用作ModalContent的{{1}}。例如，

ModalDialog

绑定可能与原始控件中的<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作为应用程序的根框架。如果您需要多个ModalDialog，可以参考GitHub上的Search (and Login) Sample。

在数据模板中访问Popup-Dialog

1 个答案: