WPF项目实战合集(2022终结版)
交一下作业，图中上方五个数据卡片使用同一模板生成，左下方五个导航卡片也使用同一模板生成，其中的数据、icon路径均从后台获取并绑定至控件中，我定义了一个类型为Object的附加属性DataContext用于外部控件与其模板间的数据传递，不清楚实际项目中会如何设计。剩下的就不做了，大同小异，继续往后面看视频了。再贴一下代码，也是边查边写的，可能会比较乱。
窗口代码：
<Window x:Class="_01WPF绑定阶段性总结作业.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绑定阶段性总结作业"
mc:Ignorable="d"
Title="WPF内部培训训练" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="White">
<!-- 第一行内容 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实战训练营" 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绑定阶段性总结作业">
<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="提现" 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绑定阶段性总结作业
{
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("财务", "icons/金钱.png"),
new MenuButton("积分", "icons/积分.png"),
new MenuButton("市场", "icons/乐分市场.png"),
new MenuButton("客服", "icons/客服.png") };
ScoreInfos = new List<ScoreInfo>()
{
new ScoreInfo("现金积分",255539, 0.8f),
new ScoreInfo("商城积分",255539, 0.8f),
new ScoreInfo("理财积分",255539, 0.8f),
new ScoreInfo("激活码",255539, 0.8f),
new ScoreInfo("活跃用户",255539, 0.8f) };
ButtonCards = new List<ButtonCard>()
{
new ButtonCard("icons/会员.png", "成为会员,加入我们"),
new ButtonCard("icons/投资.png", "我要投资"),
new ButtonCard("icons/商城.png", "积分商城"),
new ButtonCard("icons/兑换.png", "兑换任务"),
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绑定阶段性总结作业
{
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
}
}
