在HTML中有这么几种元素
WPF和HTML页面类似用XML进行页面编程,那么上述的模板
、CSS
和JS
放在哪呢?
答案就是Window.Resources
中
设置列表的模板
<Window.Resources>
<DataTemplate x:Key="MyItemTemplate">
<Grid>
<Border
Height="46"
Background="#ffffff"
CornerRadius="4">
<TextBlock
Margin="10,0,0,0"
VerticalAlignment="Center"
Text="{Binding name}" />
</Border>
</Grid>
</DataTemplate>
<DataTemplate x:Key="MyItemsPanel">
<StackPanel />
</DataTemplate>
</Window.Resources>
使用方式
<ListBox
x:Name="audio_list_box"
Grid.Row="0"
Margin="10,10"
Background="#f3f3f3"
BorderThickness="0"
FocusVisualStyle="{DynamicResource MyFocusVisualStyle}"
ItemContainerStyle="{DynamicResource MyItemContainerStyle}"
ItemTemplate="{DynamicResource MyItemTemplate}"
ItemsPanel="{Binding MyItemsPanel}"
ItemsSource="{Binding MYAudioDevices}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
<Window.Resources>
<SolidColorBrush x:Key="Item.SelectedActive.Border" Color="Red" />
<Style x:Key="style_button" TargetType="Button">
<Style.Setters>
<Setter Property="BorderThickness" Value="0" />
</Style.Setters>
<Style.Triggers />
</Style>
<Style
x:Key="style_close_button"
BasedOn="{StaticResource style_button}"
TargetType="Button">
<Style.Setters>
<Setter Property="BorderThickness" Value="0" />
</Style.Setters>
<Style.Triggers />
</Style>
<Style x:Key="MyItemContainerStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Padding" Value="0,0,0,0" />
<Setter Property="Margin" Value="0,0,0,6" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border
x:Name="Bd"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true">
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Item.SelectedActive.Border}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="False" />
<Condition Property="IsSelected" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Item.SelectedActive.Border}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="True" />
<Condition Property="IsSelected" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Item.SelectedActive.Border}" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MyFocusVisualStyle" TargetType="{x:Type Control}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Grid />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
使用方式
<ListBox
x:Name="audio_list_box"
Grid.Row="0"
Margin="10,10"
Background="#f3f3f3"
BorderThickness="0"
FocusVisualStyle="{DynamicResource MyFocusVisualStyle}"
ItemContainerStyle="{DynamicResource MyItemContainerStyle}"
ItemTemplate="{DynamicResource MyItemTemplate}"
ItemsPanel="{Binding MyItemsPanel}"
ItemsSource="{Binding MYAudioDevices}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
这个就是引用C#写的类
下面的示例主要是根据绑定的值控制组件显示隐藏
<Window.Resources>
<util:ZJGenericTypeConverter x:Key="anyTypeConverter" />
</Window.Resources>
对应的类
using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Data;
namespace ZJClassTool.Utils
{
public class ZJGenericTypeConverter : IValueConverter
{
/// <summary>
/// 正向键值对字典
/// </summary>
private Dictionary<string, string> Alias { get; set; }
/// <summary>
/// 反向键值对字典
/// </summary>
private Dictionary<string, string> BackAlias { get; set; }
private string aliasStrTemp = "";
/// <summary>
/// 解析转换规则
/// </summary>
/// <param name="aliasStr">规则字符串</param>
private void ParseAliasByStr(string aliasStr)
{
if (aliasStrTemp == aliasStr)
return;
aliasStrTemp = aliasStr;
Alias = new Dictionary<string, string>();
BackAlias = new Dictionary<string, string>();
string content = aliasStr;
Alias = new Dictionary<string, string>();
string[] arr1 = content.Split('|');
foreach (string item in arr1)
{
string[] arr2 = item.Split(':');
var key = arr2[0];
if (key == "true")
{
key = "True";
}
else if (key == "false")
{
key = "False";
}
var value = arr2[1];
if (key != "other")
{
BackAlias.Add(value, key);
}
Alias.Add(key, value);
}
}
private object ConvertCommon(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture, bool isBack)
{
if (value == null || string.IsNullOrWhiteSpace(parameter.ToString()))
return null;
object ret = value;//如果没有匹配返回传入的值
ParseAliasByStr(parameter.ToString());
Dictionary<string, string> alias;
if (isBack)
alias = BackAlias;
else
alias = Alias;
//绑定的值
string bindingValue = value.ToString();
if (alias.ContainsKey(bindingValue))
ret = StringToTargetType(alias[bindingValue], targetType);
else if (alias.ContainsKey("other"))
ret = StringToTargetType(alias["other"], targetType);
else if (alias.ContainsKey("else"))
ret = StringToTargetType(alias["else"], targetType);
return ret;
}
/// <summary>
/// 字符串转换成目标类型,如需添加一个目标类型只需在该方法中添加一个类型判断之后转换
/// </summary>
/// <param name="strValue"></param>
/// <param name="targetType"></param>
/// <returns></returns>
private object StringToTargetType(string strValue, Type targetType)
{
object ret = null;
//目标类型 string
if (targetType == typeof(string) || targetType == typeof(char))
{
ret = strValue;
}
//目标类型 char
if (targetType == typeof(char))
{
if (strValue.Length == 1)
ret = strValue;
}
//目标类型 int
if (targetType == typeof(int))
{
int temp;
if (int.TryParse(strValue, out temp))
ret = temp;
else
ret = 0;
}
//目标类型 double
if (targetType == typeof(double))
{
double temp;
if (double.TryParse(strValue, out temp))
ret = temp;
else
ret = 0;
}
//目标类型 float
if (targetType == typeof(float))
{
float temp;
if (float.TryParse(strValue, out temp))
ret = temp;
else
ret = 0;
}
//目标类型 decimal
if (targetType == typeof(decimal))
{
decimal temp;
if (decimal.TryParse(strValue, out temp))
ret = temp;
else
ret = 0;
}
//目标类型 bool? bool
if (targetType == typeof(bool?) || targetType == typeof(bool))
{
bool temp;
if (bool.TryParse(strValue, out temp))
ret = temp;
else
ret = false;
}
//目标类型 Visibility
if (targetType == typeof(Visibility))
{
switch (strValue.ToLower())
{
case "collapsed":
ret = Visibility.Collapsed;
break;
case "hidden":
ret = Visibility.Hidden;
break;
case "visible":
ret = Visibility.Visible;
break;
default:
ret = Visibility.Visible;
break;
}
}
return ret;
}
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return ConvertCommon(value, targetType, parameter, culture, false);
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return ConvertCommon(value, targetType, parameter, culture, true);
}
}
}
使用
<views:ZJClippingBorder CornerRadius="4" Visibility="{Binding IsStart, Converter={StaticResource anyTypeConverter}, ConverterParameter='false:Visible|true:Collapsed'}">
<Button
Width="100"
Height="46"
Click="start_Click"
Style="{StaticResource style_close_button}">
开始
</Button>
</views:ZJClippingBorder>
<views:ZJClippingBorder CornerRadius="4" Visibility="{Binding IsStart, Converter={StaticResource anyTypeConverter}, ConverterParameter='true:Visible|false:Collapsed'}">
<Button
Width="100"
Height="46"
Click="start_Click"
Style="{StaticResource style_close_button}">
结束
</Button>
</views:ZJClippingBorder>