當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

[UWP开发]UI模板（一）

發布時間：2024/3/26 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 [UWP开发]UI模板（一）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

[UWP開發]UI模板（一）

總結一些以前用過的界面框架，貼出來給新手參考。
先介紹一個用于文章的圖文混排，具有列表的格式。

左邊為標題，文字內容。下面為一個List結構，包含標題和內容。右邊為圖片。

1 . Model

整體結構

public class ProductListItem {public ProductListItem(string title, string content, List<TitleContent> li, PageType frameType, Uri pic){Title = title; //標題Content = content; //文本內容Li = li; //列表FrameType = frameType; //頁面標記，定義為enumPic = pic; //圖片路徑}public string Title { get; set; }public string Content { get; set; }public PageType FrameType { get; set; }public List<TitleContent> Li { get; set; }public Uri Pic { get; set; }public ImageSource Is{get{return new BitmapImage(Pic);}} }

列表結構

public class TitleContent {public TitleContent(string title, string content){Title = title;Content = content;}public string Title { get; set; }public string Content { get; set; } }

2 . ViewModel

class ProductListViewModel {public List<ProductListItem> SelectedProductItems = new List<ProductListItem>();public List<ProductListItem> _ProductItems = null;public ProductListViewModel(){if (_ProductItems == null){InitProductItems();}}//所有的賦值操作public void InitProductItems(){var resourceLoader = ResourceLoader.GetForCurrentView();_ProductItems = new List<ProductListItem>();List<TitleContent> Tc = new List<TitleContent>();Tc.Add(new TitleContent("Universal Windows Application1", "Hello World!"));Tc.Add(new TitleContent("Universal Windows Application2", string.Empty));Tc.Add(new TitleContent("Universal Windows Application3", "Good!"));_ProductItems.Add(new ProductListItem("CSDN Blog", "http://blog.csdn.net/xiahn1a", Tc, PageType.ProductPage1, new Uri("ms-appx:///Assets/rocket.jpg")));}//根據頁面的標記，選出用于該頁面的信息public void GetSelectedItem(PageType pt){SelectedProductItems = _ProductItems.Where(i => i.FrameType == pt).ToList();} }

3.View

xmlns:ValueConverters="using:MyApp.ValueConverters"

定義列表數據模板：

<Page.Resources><ValueConverters:StringEmptyToVisibilityConverter x:Key="StringEmptyToVisibilityConverter"/><DataTemplate x:Key="MainProductItemTemplate" x:DataType="local:TitleContent"><StackPanel><Grid Margin="0,0,0,5"><Grid.ColumnDefinitions><ColumnDefinition Width="auto"></ColumnDefinition><ColumnDefinition Width="*"></ColumnDefinition></Grid.ColumnDefinitions><SymbolIcon Grid.Column="0" Symbol="Accept" Foreground="#FF1ABC9C" /><TextBlock Grid.Column="1" Text="{x:Bind Title}" Margin="15,5,0,5" FontSize="16" TextWrapping="Wrap"/></Grid><TextBlock Text="{x:Bind Content}" FontSize="16" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" TextWrapping="Wrap" Visibility="{x:Bind Content, Converter={StaticResource StringEmptyToVisibilityConverter}}" Margin="0,0,0,5"/></StackPanel></DataTemplate> </Page.Resources>

其中用到的Converter，意義在于設定部分可見性。此處定義為，如果字符串為空，則該部分不可見。這樣使得模板在某部分信息缺失時也可用，不會影響排版。Converter定義如下：

namespace MyApp.ValueConverters {public class StringEmptyToVisibilityConverter : IValueConverter{public object Convert(object value, Type targetType, object parameter, string language){if (value == null)return Visibility.Collapsed;var result = (string)value;return result.Equals(string.Empty) ? Visibility.Collapsed : Visibility.Visible;}public object ConvertBack(object value, Type targetType, object parameter, string language){throw new NotImplementedException();}} }

定義左側文字整體結構：

其中對ListView的Style進行了修改，主要目的是刪減多余的動畫效果。代碼過長且并不關鍵，不貼了。

對應的后臺cs文件：

public sealed partial class ProductListView : Page {public ProductListView(){this.InitializeComponent();}protected override void OnNavigatedTo(NavigationEventArgs e){base.OnNavigatedTo(e);DataContext = e.Parameter;} }

界面定義時已進行數據綁定，此處只需DataContext = e.Parameter;賦值即可。

模板的引用方法：
在頁面中定義一個Frame，后臺代碼中只需完成Frame跳轉即可。

public sealed partial class ProductPage1 : Page {private readonly ProductListViewModel _viewModel;public ProductPage1(){this.InitializeComponent();_viewModel = new ProductListViewModel(); //viewmodel_viewModel.GetSelectedItem(PageType.ProductPage1); //選出用于本頁使用的部分}protected override void OnNavigatedTo(NavigationEventArgs e){base.OnNavigatedTo(e);MainFrame.Navigate(typeof(ProductListView), _viewModel.SelectedProductItems[0]); //跳轉頁面，傳遞數據} }

如以后需要再使用該模板創建更多的實例，則在ViewModel中賦值，對_ProductItems加入更多信息。以PageType這個標記作為引用時的區分。引用不同數據時只需改PageType這一個參數即可。

已經完成了左邊文字部分的模板定義?，F在把圖片加入進去，并且設置，當窗口過小時，排版規則從文字圖片左右排布，變為上下排布。
再定義一個View：

代碼較多，但實際上只是定義了一個觸發器。當窗口大小小于某個數值的時候，將Grid1和Grid2的左右排布變為上下排布。Grid1中的Frame即為上面定義的左側文字部分。
后臺代碼與定義左側部分時基本相同，代碼如下：

public sealed partial class ProductListFullView : Page {public ProductListFullView(){this.InitializeComponent();}protected override void OnNavigatedTo(NavigationEventArgs e){base.OnNavigatedTo(e);DataContext = e.Parameter;ProductFrame.Navigate(typeof(ProductListView), e.Parameter);} }

對于模板的修改，減少內容可以定義Visibility，利用Converter對于綁定參數內容，判斷是否為空，決定可見性。
可根據實際情況進行修改，此類模板的定義基本大同小異。

代碼通過Visual Studio 2017測試。
轉載請注明出處。
請不要私信索要代碼，代碼都是從完整的工程中節選并簡化的，寫完這個文檔以后我也沒有留存。

總結

以上是生活随笔為你收集整理的[UWP开发]UI模板（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： mysql使用union all时字符集
下一篇： Android编译错误：No rule