WPF項(xiàng)目實(shí)戰(zhàn)合集(2022終結(jié)版)
交一下作業(yè)，圖中上方五個(gè)數(shù)據(jù)卡片使用同一模板生成，左下方五個(gè)導(dǎo)航卡片也使用同一模板生成，其中的數(shù)據(jù)、icon路徑均從后臺(tái)獲取并綁定至控件中，我定義了一個(gè)類型為Object的附加屬性DataContext用于外部控件與其模板間的數(shù)據(jù)傳遞，不清楚實(shí)際項(xiàng)目中會(huì)如何設(shè)計(jì)。剩下的就不做了，大同小異，繼續(xù)往后面看視頻了。再貼一下代碼，也是邊查邊寫的，可能會(huì)比較亂。
窗口代碼：
<Window x:Class="_01WPF綁定階段性總結(jié)作業(yè).MainWindow"
????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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
????xmlns:local="clr-namespace:_01WPF綁定階段性總結(jié)作業(yè)"
????mc:Ignorable="d"
????Title="WPF內(nèi)部培訓(xùn)訓(xùn)練" Height="450" Width="800">
??<Grid>
????<Grid.RowDefinitions>
??????<RowDefinition Height="60"></RowDefinition>
??????<RowDefinition></RowDefinition>
????</Grid.RowDefinitions>
????<Grid Grid.Row="0" Background="White">
??????<!-- 第一行內(nèi)容 Logo與菜單 -->
??????<Grid.ColumnDefinitions>
????????<ColumnDefinition Width="0.3*"></ColumnDefinition>
????????<ColumnDefinition ></ColumnDefinition>
????????<ColumnDefinition Width="0.2*"></ColumnDefinition>
??????</Grid.ColumnDefinitions>
??????<StackPanel Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center">
????????<TextBlock Text="WPF實(shí)戰(zhàn)訓(xùn)練營" FontSize="18" Foreground="Red"></TextBlock>
??????</StackPanel>
??????<WrapPanel Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center">
????????<Button?Style="{StaticResource MenuButtonStyle}" local:ControlAttachProperty.DataContext="{Binding MenuButtons[0]}"></Button>
????????<Button?Style="{StaticResource MenuButtonStyle}" local:ControlAttachProperty.DataContext="{Binding MenuButtons[1]}"></Button>
????????<Button?Style="{StaticResource MenuButtonStyle}" local:ControlAttachProperty.DataContext="{Binding MenuButtons[2]}"></Button>
????????<Button?Style="{StaticResource MenuButtonStyle}" local:ControlAttachProperty.DataContext="{Binding MenuButtons[3]}"></Button>
????????<Button?Style="{StaticResource MenuButtonStyle}" local:ControlAttachProperty.DataContext="{Binding MenuButtons[4]}"></Button>
??????</WrapPanel>
????</Grid>
????<Grid Grid.Row="1" Background="#F3F3F3" >
??????<Grid.RowDefinitions>
????????<RowDefinition></RowDefinition>
????????<RowDefinition></RowDefinition>
????????<RowDefinition></RowDefinition>
????????<RowDefinition></RowDefinition>
??????</Grid.RowDefinitions>
??????<Grid.ColumnDefinitions>
????????<ColumnDefinition></ColumnDefinition>
????????<ColumnDefinition></ColumnDefinition>
????????<ColumnDefinition></ColumnDefinition>
????????<ColumnDefinition></ColumnDefinition>
????????<ColumnDefinition></ColumnDefinition>
??????</Grid.ColumnDefinitions>
??????<ContentControl Grid.Row="0" Grid.Column="0" Style="{StaticResource DataCardTemplate}" Background="#2399FD"?local:ControlAttachProperty.DataContext="{Binding ScoreInfos[0]}"></ContentControl>
??????<ContentControl Grid.Row="0" Grid.Column="1" Style="{StaticResource DataCardTemplate}" Background="#60B723"?local:ControlAttachProperty.DataContext="{Binding ScoreInfos[1]}"></ContentControl>
??????<ContentControl Grid.Row="0" Grid.Column="2" Style="{StaticResource DataCardTemplate}" Background="#FFA100"?local:ControlAttachProperty.DataContext="{Binding ScoreInfos[2]}"></ContentControl>
??????<ContentControl Grid.Row="0" Grid.Column="3" Style="{StaticResource DataCardTemplate}" Background="#30B8C6"?local:ControlAttachProperty.DataContext="{Binding ScoreInfos[3]}"></ContentControl>
??????<ContentControl Grid.Row="0" Grid.Column="4" Style="{StaticResource DataCardTemplate}" Background="#E87A6C"?local:ControlAttachProperty.DataContext="{Binding ScoreInfos[4]}"></ContentControl>
??????<ContentControl Grid.Row="1" Grid.Column="0" Style="{StaticResource ButtonCardTemplate}" Grid.ColumnSpan="2" Background="White" local:ControlAttachProperty.DataContext="{Binding ButtonCards[0]}"></ContentControl>
??????<ContentControl Grid.Row="2" Grid.Column="0" Style="{StaticResource ButtonCardTemplate}" Background="White" local:ControlAttachProperty.DataContext="{Binding ButtonCards[1]}"></ContentControl>
??????<ContentControl Grid.Row="2" Grid.Column="1" Style="{StaticResource ButtonCardTemplate}" Background="White" local:ControlAttachProperty.DataContext="{Binding ButtonCards[2]}"></ContentControl>
??????<ContentControl Grid.Row="3" Grid.Column="0" Style="{StaticResource ButtonCardTemplate}" Background="White" local:ControlAttachProperty.DataContext="{Binding ButtonCards[3]}"></ContentControl>
??????<ContentControl Grid.Row="3" Grid.Column="1" Style="{StaticResource ButtonCardTemplate}" Background="White" local:ControlAttachProperty.DataContext="{Binding ButtonCards[4]}"></ContentControl>
????</Grid>
??</Grid>
</Window>
模板資源代碼：
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
??????????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
??xmlns:local="clr-namespace:_01WPF綁定階段性總結(jié)作業(yè)">
??<Style x:Key="MenuButtonStyle"?TargetType="Button">
????<Setter Property="FontSize" Value="14" />
????<Setter Property="Foreground" Value="#B9B5B2" />
????<Setter Property="Template">
??????<Setter.Value>
????????<ControlTemplate TargetType="Button">
??????????<Border x:Name="Border" Background="White"
??????????Width="60" Height="40" Margin="20,0,0,0">
????????????<Grid>
??????????????<Grid.ColumnDefinitions>
????????????????<ColumnDefinition/>
????????????????<ColumnDefinition/>
??????????????</Grid.ColumnDefinitions>
??????????????<Image Source="{Binding Path=(local:ControlAttachProperty.DataContext).IconPath,?
????????????????????RelativeSource={RelativeSource TemplatedParent}}" Width="16" Height="16"/>
??????????????<TextBlock Grid.Column="1" Text="{Binding Path=(local:ControlAttachProperty.DataContext).Name,?
????????????????????RelativeSource={RelativeSource TemplatedParent}}"
???????????????VerticalAlignment="Center"?/>
????????????</Grid>
??????????</Border>
??????????<ControlTemplate.Triggers>
????????????<Trigger Property="IsMouseOver" Value="True">
??????????????<Setter TargetName="Border" Property="Background" Value="#BBE3FE" />
????????????</Trigger>
??????????</ControlTemplate.Triggers>
????????</ControlTemplate>
??????</Setter.Value>
????</Setter>
??</Style>
??<Style x:Key="DataCardTemplate"?TargetType="ContentControl">
????<Setter Property="Foreground" Value="White"/>
????<Setter Property="Template">
??????<Setter.Value>
????????<ControlTemplate TargetType="ContentControl">
??????????<Border?Background="{TemplateBinding Background}" CornerRadius="1" Margin="10" >
????????????<Grid>
??????????????<Grid.RowDefinitions>
????????????????<RowDefinition Height="1*"></RowDefinition>
????????????????<RowDefinition></RowDefinition>
????????????????<RowDefinition Height="1*"></RowDefinition>
??????????????</Grid.RowDefinitions>
??????????????<StackPanel Grid.Row="0" VerticalAlignment="Center" Margin="10,0,0,0">
????????????????<TextBlock Text="{Binding Path=(local:ControlAttachProperty.DataContext).Title,?
????????????????????RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
??????????????</StackPanel>
??????????????<Grid Grid.Row="1" Margin="10,0,0,0">
????????????????<Grid.ColumnDefinitions>
??????????????????<ColumnDefinition></ColumnDefinition>
??????????????????<ColumnDefinition></ColumnDefinition>
????????????????</Grid.ColumnDefinitions>
????????????????<StackPanel Grid.Column="0">
??????????????????<TextBlock HorizontalAlignment="Left" Text="{Binding Path=(local:ControlAttachProperty.DataContext).Score,?
????????????????????RelativeSource={RelativeSource TemplatedParent}}" FontSize="20"></TextBlock>
????????????????</StackPanel>
????????????????<StackPanel Grid.Column="1" HorizontalAlignment="Right" Margin="0,0,10,0">
??????????????????<TextBlock Text="收益" HorizontalAlignment="Right"></TextBlock>
??????????????????<TextBlock Text="{Binding Path=(local:ControlAttachProperty.DataContext).Proportion,?
????????????????????RelativeSource={RelativeSource TemplatedParent},StringFormat=+{0}%}"></TextBlock>
????????????????</StackPanel>
??????????????</Grid>
??????????????<StackPanel Grid.Row="2" HorizontalAlignment="Left" Margin="0,0,10,0" Orientation="Horizontal">
????????????????<TextBlock Text="提現(xiàn)" Margin="10,0,0,0"></TextBlock>
????????????????<TextBlock Text="充值" Margin="10,0,0,0"></TextBlock>
??????????????</StackPanel>
????????????</Grid>
??????????</Border>
????????</ControlTemplate>
??????</Setter.Value>
????</Setter>
??</Style>
??<Style x:Key="ButtonCardTemplate"?TargetType="ContentControl">
????<Setter Property="Template">
??????<Setter.Value>
????????<ControlTemplate TargetType="ContentControl">
??????????<Border?Background="{TemplateBinding Background}" CornerRadius="1" Margin="10" >
????????????<Grid>
??????????????<Grid.ColumnDefinitions>
????????????????<ColumnDefinition Width="0.5*"/>
????????????????<ColumnDefinition/>
??????????????</Grid.ColumnDefinitions>
??????????????<Image Source="{Binding Path=(local:ControlAttachProperty.DataContext).IconPath,?
????????????????????RelativeSource={RelativeSource TemplatedParent}}" Width="20" Height="20" HorizontalAlignment="Right" Margin="0,0,10,0"/>
??????????????<StackPanel Grid.Column="1" VerticalAlignment="Center">
????????????????<TextBlock?Text="{Binding Path=(local:ControlAttachProperty.DataContext).Message,?
????????????????????RelativeSource={RelativeSource TemplatedParent}}"
????????????????FontSize="15"/>
????????????????<TextBlock?Text="立即前往"
????????????????Foreground="#BABABA" FontSize="10"/>
??????????????</StackPanel>
????????????</Grid>
??????????</Border>
????????</ControlTemplate>
??????</Setter.Value>
????</Setter>
??</Style>
</ResourceDictionary>
視圖模型代碼：
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Media.Imaging;
namespace _01WPF綁定階段性總結(jié)作業(yè)
{
??public class MainViewModel : ObservableObject
??{
????public List<MenuButton> MenuButtons { get; set; }
????public List<ScoreInfo> ScoreInfos { get; set; }
????public List<ButtonCard> ButtonCards { get; set; }
????public MainViewModel()
????{
??????MenuButtons = new List<MenuButton>()
??????{
????????new MenuButton("用戶", "icons/user.png"),
????????new MenuButton("財(cái)務(wù)", "icons/金錢.png"),
????????new MenuButton("積分", "icons/積分.png"),
????????new MenuButton("市場", "icons/樂分市場.png"),
????????new MenuButton("客服", "icons/客服.png") };
??????ScoreInfos = new List<ScoreInfo>()
??????{
????????new ScoreInfo("現(xiàn)金積分",255539, 0.8f),
????????new ScoreInfo("商城積分",255539, 0.8f),
????????new ScoreInfo("理財(cái)積分",255539, 0.8f),
????????new ScoreInfo("激活碼",255539, 0.8f),
????????new ScoreInfo("活躍用戶",255539, 0.8f) };
??????ButtonCards = new List<ButtonCard>()
??????{
????????new ButtonCard("icons/會(huì)員.png", "成為會(huì)員,加入我們"),
????????new ButtonCard("icons/投資.png", "我要投資"),
??????new ButtonCard("icons/商城.png", "積分商城"),
??????new ButtonCard("icons/兌換.png", "兌換任務(wù)"),
??????new ButtonCard("icons/銀行卡.png", "線下充值")};
????}
??}
??public class MenuButton
??{
????public RelayCommand ShowCommand { get; }
????public MenuButton(string name, string iconPath)
????{
??????Name = name;
??????IconPath = iconPath;
??????ShowCommand = new RelayCommand(Show);
????}
????public string Name { get; set; }
????public string IconPath { get; set; }
????void Show()
????{
??????MessageBox.Show(Name);
????}
??}
??public class ScoreInfo
??{
????public string Title { get; set; }
????public string Score { get; set; }
????public float Proportion { get; set; }
????public ScoreInfo(string title,int s, float p)
????{
??????Title=title;
??????Score = Convert(s);
??????Proportion = p;
????}
????string Convert(int s)
????{
??????string re = s.ToString();
??????char[] chars = re.ToCharArray();
??????re = "";
??????int index = 0;
??????for (int i = chars.Length - 1; i >= 3; i -= 3)
??????{
????????re = "," + chars[i - 2] + chars[i - 1] + chars[i] + re;
????????index = i - 3;
??????}
??????if (index > 0)
??????{
????????for (int i = 0; i < index + 1; i++)
????????{
??????????re = chars[index - i] + re;
????????}
??????}
??????else
??????{
????????re = re.Remove(0, 1);
??????}
??????return re;
????}
??}
??public class ButtonCard
??{
????public ButtonCard(string iconPath, string message)
????{
??????IconPath = iconPath;
??????Message = message;
????}
????public string IconPath { get; set; }
????public string Message { get; set; }
??}
}
附加屬性代碼：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Media.Imaging;
namespace _01WPF綁定階段性總結(jié)作業(yè)
{
??public class ControlAttachProperty
??{
????#region 通用上下文
????public static readonly DependencyProperty DataContextProperty =
????DependencyProperty.RegisterAttached("DataContext", typeof(object), typeof(ControlAttachProperty), new PropertyMetadata(null));
????public static object GetDataContext(DependencyObject obj)
????{
??????return (object)obj.GetValue(DataContextProperty);
????}
????public static void SetDataContext(DependencyObject obj, string value)
????{
??????obj.SetValue(DataContextProperty, value);
????}
????#endregion
??}
}
