UWP应用模板

本文关键字:应用 UWP | 更新日期: 2023-09-27 18:12:12

我正在开发一个UWP应用程序。UI的设计类似于Windows 10中的Email应用(我的应用设计)。

这是我的XAML代码:
<Page
x:Class="Milano.InWork"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Milano"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid BorderBrush="White" BorderThickness="1">
    <Grid.Background>
        <ImageBrush Stretch="Fill" ImageSource="Images/Background.png"/>
    </Grid.Background>
    <Grid HorizontalAlignment="Left" Height="720" VerticalAlignment="Top" Width="60" BorderBrush="#FFF5F1F1" BorderThickness="0,0,1,0">
        <Button x:Name="MenuButton" Content="" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="38" Width="38">
            <Button.Background>
                <ImageBrush Stretch="Uniform" ImageSource="Images/Menu-100.png"/>
            </Button.Background>
        </Button>
        <Button x:Name="logoutbutton" Content="" HorizontalAlignment="Left" Margin="10,650,0,0" VerticalAlignment="Top"  Height="43" Width="38">
            <Button.Background>
                <ImageBrush Stretch="Uniform" ImageSource="Images/Logout_Button.png"/>
            </Button.Background>
        </Button>
    </Grid>
    <Grid HorizontalAlignment="Left" Height="47" Margin="63,2,-121,0" VerticalAlignment="Top" Width="1338" BorderBrush="#FFFDFDFD" Padding="0,0,0,1" BorderThickness="0,0,0,1">
        <TextBlock x:Name="textBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="В Работе" VerticalAlignment="Top" Height="47" Width="1218" FontSize="32" FontFamily="SF UI Display" Padding="550,0,0,0" Foreground="White"/>
    </Grid>
    <ScrollViewer HorizontalAlignment="Left" Height="668" Margin="63,52,0,0" VerticalAlignment="Top" Width="350">
        <GridView   x:Name="OrdersGridView" >
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel >
                        <Grid Height="204" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
                            <TextBlock Text="{Binding date_created}"  HorizontalAlignment="Left" TextAlignment="Center" TextWrapping="Wrap"  VerticalAlignment="Top" Width="350" Height="50" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" />
                            <TextBlock  TextAlignment="Center"  HorizontalAlignment="Left" Margin="0,146,-1,0" TextWrapping="Wrap" Text="{Binding billing.address_1}" VerticalAlignment="Top" Height="58" Width="350" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" />
                            <TextBlock  HorizontalAlignment="Left" TextAlignment="Center" Margin="0,86,-1,0" TextWrapping="Wrap" Text="{Binding billing.first_name}" VerticalAlignment="Top" Height="60" Width="350" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" Padding="0,0,0,0"/>
                        </Grid>
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </ScrollViewer>

</Grid>

我需要做的是:当用户点击Grid在屏幕应用程序的正确位置显示一些像片段(我知道这是Android的东西)与一些字段和数据,如在电子邮件Windows 10应用程序:

    点击
  • 后,点击

我如何实现这个?或者我可以在哪里阅读教程之类的东西?

谢谢你的帮助!

UWP应用模板

这是UWP中典型的Master/Detail设计,你可以参考官方的Master/Detail示例,在宽屏模式下,它使用ContentPresenter来显示细节,在窄屏模式下,它使用参数导航到细节页面。正式样品很清楚,你可以检查一下。

从你的第一个图像,我认为你可以使用ListView来取代你的GridView,对于两个控件,你可以使用SelectionChanged或ItemClick事件来显示细节,如果你想使用ItemClick事件,请不要忘记启用IsItemClickEnabled属性。

有一个MasterDetails (Mail App)示例,它使用Template 10作为项目模板,如果你对这个示例感兴趣,你也可以检查一下。