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中典型的Master/Detail设计,你可以参考官方的Master/Detail示例,在宽屏模式下,它使用ContentPresenter来显示细节,在窄屏模式下,它使用参数导航到细节页面。正式样品很清楚,你可以检查一下。
从你的第一个图像,我认为你可以使用ListView
来取代你的GridView
,对于两个控件,你可以使用SelectionChanged或ItemClick事件来显示细节,如果你想使用ItemClick
事件,请不要忘记启用IsItemClickEnabled属性。
有一个MasterDetails (Mail App)示例,它使用Template 10作为项目模板,如果你对这个示例感兴趣,你也可以检查一下。