Good XAML Patterns
1：写xaml的时候写在multiply line里(使用Xaml Styler插件会自动转行)。
2：Naming Conventient
- Resources以文件名.key的形式写：InputPageOilSwellResources.DesignNameColumnStyle，若已经在本层的话就不用写文件名了。
- x:Name应该用'_master'的形式，同coding的private
- 命名resources的时候either是style或者Template写成 DesignNameColumnStyle， DesignNameColumnTemplate，中间没有其他的连字符。
- CommonResources的文件名命名
<!-- __________________________ ProjectName_Text_Styles_Library.xaml _________________________________-->
<!-- __________________________ ProjectName_Icon_Library.xaml _________________________________-->
<!-- __________________________ ProjectName_Control_Styles_Library.xaml _________________________________-->
<!-- __________________________ ProjectName_UnitControl_Styles_Library.xaml _________________________________-->
<!-- __________________________ ProjectName_ListControl_Styles_Library.xaml _________________________________--> <!-- ALL FONTS MUST BE EMBEDDED IN THE COMMON "FONTS" FOLDER, AND A BASE FONT STYLE IS CREATED BELOW. IDIVIDUAL STYLES FOR LABELS AND TITLES WILL BE CREATED USING THE "BasedOn" FUNCTION -->
3：选用正确的container：如果需要按钮和textbox并排之间有一个gap，就不要用3列的grid做，应该用stackpanel和空间自身的padding，magging。
4: DataTemplate后面最好有x:Type
<DataTemplate DataType={x:Type string}> <TextBlock Text={Binding}> </DataTemplate> //这里最好加上DataType属性，来指明binding的是什么类型，自己方便。
5: ControlTemplate一定要有TargetType，不然消费这个CT资源会有显示不出结果的问题
<ControlTemplate TargetType = {x:Type ...}> ..... </ControlTemplate> //包括其上面的style也一定要有TargetType
6:所有page都会用到的resources像Fonts都放在高层，如windows层或者App层。
建议放在APP层：Resources defined at the application level can be accessed by all other pages that are part of the application.
<Window> <Style> Fonts定义...... </Style> </Window>
7:区分ContentPresanter 和 ContentControls
ContentControl is the base class for every control that have"content" need to display (example: Button, Label).
ContentPresenter is the placeholder used inside DT or CT by ContentControl to display the content
注意:
ContentControl里有三个属性（Content, Template, ContentTemplate），CT里包含ContentPresenter，用来吧外层的Content属性拿进CT，而ContentPresenter的格式就是ContentTemplate。
Object CT DT
ContentPresenter里只有两个属性（Content, ContentTemplate），没有Template属性，使用在任何Control的DT或者CT内部显示content。
Object DT
//这个从contentpresenter的class定义就可以看出 Class ContentPresenter { public Object Content{get; set;} public DataTemplate ContentTemplate{get; set;} }
如何使用ContentControl（比如Button）的ContentTemplate呢？
<Window 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" mc:Ignorable="d" x:Class="WpfApplication4.MainWindow" Title="MainWindow" Height="350" Width="225"> <Window.Resources> <DataTemplate x:Key="ButtonContentTemplate"> <StackPanel Orientation="Horizontal"> <Grid Height="8" Width="8"> <Path HorizontalAlignment="Stretch" Margin="0,0,1.8,1.8" VerticalAlignment="Stretch" Stretch="Fill" Stroke="#FF000000" Data="M0.5,5.7 L0.5,0.5 L5.7,0.5"/> <Path HorizontalAlignment="Stretch" Margin="2,3,0,0" VerticalAlignment="Stretch" Stretch="Fill" Stroke="#FFFFFFFF" Data="M3.2,7.5 L7.5,7.5 L7.5,3.5"/> <Path HorizontalAlignment="Stretch" Margin="1.2,1.4,0.7,0.7" VerticalAlignment="Stretch" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M2.5,2.5 L7.5,7.5"/> <Path HorizontalAlignment="Stretch" Margin="1.7,2.0,1,1" VerticalAlignment="Stretch" Stretch="Fill" Stroke="#FF000000" Data="M3,7.5 L7.5,7.5 L7.5,3.5"/> <Path HorizontalAlignment="Stretch" Margin="1,1,1,1" VerticalAlignment="Stretch" Stretch="Fill" Stroke="#FFFFFFFF" Data="M1.5,6.5 L1.5,1 L6.5,1.5"/> </Grid> <ContentPresenter Content="{Binding}"/> </StackPanel> </DataTemplate> <ControlTemplate TargetType="Button" x:Key="ButtonControlTemplate"> <Grid> <Ellipse Fill="{TemplateBinding Background}"/> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </ControlTemplate> </Window.Resources> <StackPanel> <Button Template="{StaticResource ButtonControlTemplate}" Content="1"/> <Button Template="{StaticResource ButtonControlTemplate}" ContentTemplate="{StaticResource ButtonContentTemplate}" Content="2"/> <Button Template="{StaticResource ButtonControlTemplate}" ContentTemplate="{StaticResource ButtonContentTemplate}" Content="3"/> </StackPanel> </Window>
8: PFG2独门秘笈，自定义ContentProperty
Object类可以是任何（Text，Image）
ContentControl workwith ControlTemplate
Property Type Must have type <ControlTemplate TargetType={x:Type Button}>
Content Object
ContentTemplate DataTemplate
Template ControlTemplate
ContentPresenter workwith DataTemplate
Property Type Better have type <DataTemplate DataType={x:Type sys:string}>
Content Object
ContentTemplate DataTemplate
ContentProperty的class定义：
View Code
...... public static readonly DependencyProperty TextStyleProperty; [AttachedPropertyBrowsableForType(typeof(FrameworkElement))] public static Style GetTextStyle(DependencyObject d) { return (Style)d.GetValue(TextStyleProperty); } public static void SetTextStyle(DependencyObject d, Style value) { d.SetValue(TextStyleProperty, value); } ...... public static readonly DependencyProperty StyleProperty; [AttachedPropertyBrowsableForType(typeof(FrameworkElement))] public static Style GetStyle(DependencyObject d) { return (Style)d.GetValue(StyleProperty); } public static void SetStyle(DependencyObject d, Style value) { d.SetValue(StyleProperty, value); } ......
注册一个（x:Key="CaretedUnderlined2WrappingTextTemplate"）的DataTemplate为某个控件的ContentTemplate属性赋值。
DataTemplate是给控件的ContentTemplatre属性服务的，该DataTemplate下的TextBlock分别被binding到其父的不同属性上（c:ContentProperties.Text 和 c:ContentProperties.Text2）。
View Code
<DataTemplate x:Key="CaretedUnderlined2WrappingTextTemplate"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="10"/> <!-- Caret Margin --> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Image Width="8" HorizontalAlignment="Left" Grid.Column="0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" Source="{Binding Source={StaticResource Icon_ArrowCaretDown}, Converter={StaticResource CaretIconToBrushConverter}}"> <Image.RenderTransform> <TransformGroup> <RotateTransform Angle="-90"/> </TransformGroup> </Image.RenderTransform> </Image> <Rectangle Grid.Column="1" x:Name="BackgroundRect" Style="{TemplateBinding common:ContentProperties.Style}" /> <Canvas Grid.Column="1" VerticalAlignment="Bottom"> <Line X2="{Binding ElementName=BackgroundRect, Path=ActualWidth}" Style="{TemplateBinding common:ContentProperties.Style2}"/> </Canvas> <DockPanel VerticalAlignment="Center" Grid.Column="1" x:Name="DockPanel" > <TextBlock Text="{TemplateBinding common:ContentProperties.Text}" Style="{TemplateBinding common:ContentProperties.TextStyle}" DockPanel.Dock="Left" x:Name="text1"/> <TextBlock Text="{TemplateBinding common:ContentProperties.Text2}" Style="{TemplateBinding common:ContentProperties.TextStyle2}" DockPanel.Dock="Right" TextAlignment="Right"/> </DockPanel> </Grid> </DataTemplate>
创建一个新的style，x:Key="DottedLine2TextBlockWrappingStyle"， TargetType="{x:Type ContentControl}"，对其间的contentproperties修改。
<Style x:Key="DottedLine2TextBlockWrappingStyle" TargetType="{x:Type ContentControl}"> <Setter Property="ContentTemplate" Value="{StaticResource Underlined2TextTemplate}"/> <Setter Property="common:ContentProperties.Style" Value="{StaticResource UnderlineBlockBackgroundStyle}"/> <Setter Property="common:ContentProperties.Style2" Value="{StaticResource DottedLineStyle}"/> <Setter Property="common:ContentProperties.TextStyle" Value="{StaticResource SmallLightText}"/> <Setter Property="common:ContentProperties.TextStyle2" Value="{StaticResource SmallMedTextWrapping}"/> </Style>
1 <DataTemplate x:Key="CaretedUnderlined2WrappingTextTemplate"> 2 <Grid> 3 <Grid.ColumnDefinitions> 4 <ColumnDefinition Width="10"/> 5 <!-- Caret Margin --> 6 <ColumnDefinition Width="*"/> 7 </Grid.ColumnDefinitions> 8 9 <Image Width="8" HorizontalAlignment="Left" Grid.Column="0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" 10 Source="{Binding Source={StaticResource Icon_ArrowCaretDown}, Converter={StaticResource CaretIconToBrushConverter}}"> 11 <Image.RenderTransform> 12 <TransformGroup> 13 <RotateTransform Angle="-90"/> 14 </TransformGroup> 15 </Image.RenderTransform> 16 </Image> 17 <Rectangle Grid.Column="1" x:Name="BackgroundRect" Style="{TemplateBinding common:ContentProperties.Style}" /> 18 <Canvas Grid.Column="1" VerticalAlignment="Bottom"> 19 <Line X2="{Binding ElementName=BackgroundRect, Path=ActualWidth}" Style="{TemplateBinding common:ContentProperties.Style2}"/> 20 </Canvas> 21 <DockPanel VerticalAlignment="Center" Grid.Column="1" x:Name="DockPanel" > 22 <TextBlock Text="{TemplateBinding common:ContentProperties.Text}" 23 Style="{TemplateBinding common:ContentProperties.TextStyle}" 24 DockPanel.Dock="Left" x:Name="text1"/> 25 <TextBlock Text="{TemplateBinding common:ContentProperties.Text2}" 26 Style="{TemplateBinding common:ContentProperties.TextStyle2}" 27 DockPanel.Dock="Right" TextAlignment="Right"/> 28 </DockPanel> 29 </Grid> 30 </DataTemplate>
注意<Setter Property="common:ContentProperties.Style" Value="{StaticResource UnderlineBlockBackgroundStyle}"/>的reources在某个地方有定义
下面注册一个style，用来加载到一个控件的ContentTemplate，并且BasedOn="{StaticResource DottedLine2TextBlockWrappingStyle}
<Style x:Key="CaretedDottedLine2TextBlockWrappingStyle" TargetType="{x:Type ContentControl}" BasedOn="{StaticResource DottedLine2TextBlockWrappingStyle}"> <Setter Property="ContentTemplate" Value="{StaticResource CaretedUnderlined2WrappingTextTemplate}"/> </Style>
<Style x:Key="DottedLine2TextBlockWrappingStyle" TargetType="{x:Type ContentControl}"> <Setter Property="ContentTemplate" Value="{StaticResource Underlined2TextTemplate}"/> <Setter Property="common:ContentProperties.Style" Value="{StaticResource UnderlineBlockBackgroundStyle}"/> <Setter Property="common:ContentProperties.Style2" Value="{StaticResource DottedLineStyle}"/> <Setter Property="common:ContentProperties.TextStyle" Value="{StaticResource SmallLightText}"/> <Setter Property="common:ContentProperties.TextStyle2" Value="{StaticResource SmallMedTextWrapping}"/> </Style>
在某一个地方可以使用这个ContentTemplate了
<StackPanel Grid.Column="1" Grid.Row="4" VerticalAlignment="Top"> <ContentControl Style="{StaticResource CaretedDottedLine2TextBlockWrappingStyle}" c:ContentProperties.Text="Customer or customer's agent (please print):" c:ContentProperties.Text2="{Binding Data.CusOrCusAgentPrint}"/> <ContentControl Style="{StaticResource CaretedDottedLine2TextBlockWrappingStyle}" c:ContentProperties.Text="Customer or customer's agent (signature):" c:ContentProperties.Text2="{Binding Data.CusOrCusAgentSignature}"/> </StackPanel>
8:Half Design Pattern: 如果control与control之间如果需要10margin的空间，我们可以给每个control左右各5的margin. 最外面的Container也给5的margin，这样所有的control之间和与最外面的界面边框之间都是10个margin
9: Extension Container Pattern：如果要Grid里要加入更多的control时我们又不希望重新分配grid的列或者行，我们可以把之前某一行/列包含在一个statckpanel里，以便所以增减项目。
10. Leaf Margin Pattern：给margin的时候放在做末尾。
