none
一个“XAML”样式资源定义,疑问。。。 RRS feed

  • 问题

  • “在下”对于“Silverlight”的使用基本上没有太大问题,但是对“XAML”资源的使用却有很多的不解,对“XAML”掌握的不是很好。

    <controls:ChildWindow.Resources>

            <Style x:Key="DataGridHeaderStyle" TargetType="sdk:DataGridColumnHeader">
                <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
            </Style>

    问题一:“TargetType="sdk:DataGridColumnHeader"”,设置了这个属性。就算“DataGrid”不用“HeaderStyle”这样引用,应该也可以直接作用于“DataGrid”的单元格之上吧???
            <Style x:Key="DataGridCellStyle" TargetType="sdk:DataGridCell">
                <Setter Property="HorizontalContentAlignment" Value="Center" ></Setter>
            </Style>
            <Style x:Key="DataGridBaseHeaderStyle" TargetType="sdk:DataGridColumnHeader">
                <Setter Property="FontWeight" Value="Normal" />
            </Style>

            <Style x:Key="TimeSheetDayHeaderStyle" TargetType="sdk:DataGridColumnHeader" BasedOn="{StaticResource DataGridBaseHeaderStyle}">

    问题二:“BasedOn”表示什么意思???继承吗???

                <Setter Property="Foreground" Value="#FF000000"/>
                <Setter Property="HorizontalContentAlignment" Value="Left"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="SeparatorBrush" Value="#FFC9CACA"/>
                <Setter Property="Padding" Value="8"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>

    问题三:这里表示定义一个控件模板,对吧???
                            <Grid x:Name="Root">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <VisualStateManager.VisualStateGroups>

    问题四:“VisualState”不是做动画的吗???为什么这里使用“VisualStateManager”,它的作用是什么呢???
                                    <VisualStateGroup x:Name="CommonStates">

    问题五:“VisualStateGroup”表示什么?怎么还有状态分组的???
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>

    问题六:“VisualState”表示什么???可以放动画???也没有看到动画效果啊。。。
                                                <ColorAnimation Duration="0"  
                                                        Storyboard.TargetName="BackgroundRectangle"  
                                                        Storyboard.TargetProperty="(Fill).Color" To="#FF448DCA"/>
                                                <ColorAnimation Duration="0"  
                                                        Storyboard.TargetName="BackgroundGradient"  
                                                        Storyboard.TargetProperty="(Fill).(GradientStops)[3].Color" To="#7FFFFFFF"/>
                                                <ColorAnimation Duration="0"  
                                                        Storyboard.TargetName="BackgroundGradient"  
                                                        Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color" To="#CCFFFFFF"/>
                                                <ColorAnimation Duration="0"  
                                                        Storyboard.TargetName="BackgroundGradient"  
                                                        Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color" To="#F2FFFFFF"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ColorAnimation Duration="0"  
                                                        Storyboard.TargetName="BackgroundRectangle"  
                                                        Storyboard.TargetProperty="(Fill).Color" To="#FF448DCA"/>
                                                <ColorAnimation Duration="0"  
                                                        Storyboard.TargetName="BackgroundGradient"  
                                                        Storyboard.TargetProperty="(Fill).(GradientStops)[0].Color" To="#D8FFFFFF"/>
                                                <ColorAnimation Duration="0"  
                                                        Storyboard.TargetName="BackgroundGradient"  
                                                        Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color" To="#C6FFFFFF"/>
                                                <ColorAnimation Duration="0"  
                                                        Storyboard.TargetName="BackgroundGradient"  
                                                        Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color" To="#8CFFFFFF"/>
                                                <ColorAnimation Duration="0"  
                                                        Storyboard.TargetName="BackgroundGradient"  
                                                        Storyboard.TargetProperty="(Fill).(GradientStops)[3].Color" To="#3FFFFFFF"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SortStates">
                                        <VisualState x:Name="Unsorted"/>
                                        <VisualState x:Name="SortAscending" />
                                        <VisualState x:Name="SortDescending" />
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Rectangle x:Name="BackgroundRectangle" Fill="#FF1F3B53" Stretch="Fill" Grid.ColumnSpan="2"/>
                                <Rectangle x:Name="BackgroundGradient" Stretch="Fill" Grid.ColumnSpan="2">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                            <GradientStop Color="#FCFFFFFF" Offset="0.015"/>
                                            <GradientStop Color="#F7FFFFFF" Offset="0.375"/>
                                            <GradientStop Color="#E5FFFFFF" Offset="0.6"/>
                                            <GradientStop Color="#D1FFFFFF" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>

    问题七:这里怎么还定义了两个“Rectangle”呢???
                                <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"  
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

    问题八:这里在“控件模板”中又定义了一个“Grid”,都定义了两个了。

                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="20" />
                                        <RowDefinition Height="1" />
                                        <RowDefinition Height="20" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="100"/>
                                        <ColumnDefinition Width="1" />
                                        <ColumnDefinition Width="299"/>
                                        <ColumnDefinition Width="1" />
                                        <ColumnDefinition Width="199"/>
                                    </Grid.ColumnDefinitions>
                                    <!-- 第0行 -->
                                    <ContentPresenter Content="险情类型" Grid.Row="0" VerticalAlignment="Center"  
                                              HorizontalAlignment="Center" />

    问题九:“ContentPresenter”表示什么意思呢???作用是什么???
                                    <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1"   
                                       Visibility="Visible" Grid.Row="0" Grid.Column="1" />
                                    <ContentPresenter Content="险情标题" Grid.Row="0" Grid.Column="2"  
                                              VerticalAlignment="Center" HorizontalAlignment="Center" />
                                    <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1"   
                                       Visibility="Visible" Grid.Row="0" Grid.Column="3" />
                                    <ContentPresenter Content="上传时间" Grid.Row="0" Grid.Column="4"  
                                              VerticalAlignment="Center" HorizontalAlignment="Center" />
                                    <!-- 第一行 -->
                                    <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Height="1"  
                                       Visibility="Visible" Grid.Row="1" Grid.ColumnSpan="5" />
                                    <!-- 第二行 -->
                                    <ContentPresenter Content="险情描述"  
                                              VerticalAlignment="Center" HorizontalAlignment="Center"  
                                              Grid.ColumnSpan="5" Grid.Row="2" />
                                </Grid>
                                <Rectangle x:Name="VerticalSeparator" Fill="#FFC9CACA"  
                                   VerticalAlignment="Stretch" Width="1" Visibility="Visible"  
                                   Grid.Row="1" Grid.Column="1"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="TimeSheetTotalsHeaderStyle" TargetType="sdk:DataGridColumnHeader" BasedOn="{StaticResource TimeSheetDayHeaderStyle}">
                <Setter Property="Foreground" Value="#FFFF0000"/>
            </Style>
        </controls:ChildWindow.Resources>

    问题十:“XAML”应该怎样学习呢???   单纯的学习“Silverlight”并不能提升"XAML"啊。。。     有相关的资料可以参考吗???    好纠结啊。。。


    Science and technology is my lover.

    2012年7月16日 3:27

答案

  • 你好,

    建议可以将问题拆分,在一个帖子中只问一个问题,并且在题目中写出具体的问题,以便于其他人搜索提高现有资源利用率。

    1。Style的其中一种Implicity Style隐式样式可以实现你所要的功能。就是就算在DataGrid中不设置HeaderStyle也一样可以自动使DataGrid应用相应的样式。将现有的样式改为隐式很简单,就是去掉style的x:key属性即可。

    2。BaseOn可以理解为继承,样式A BasedOn设为样式B,则B里面所设定的样式直接就应用于样式A。

    3,4,5. VisualStateGroup是多个VisualState形成的一个组。如果添加VisualState一定要求放在一个VisualStateGroup中。一个样式中可以含有多个VisualStateGroup将相关的VisualState放在一个组里,比如CheckBox的VisualState分为两个组,一个主要控制基本的动画,比如MouseOver, MouseEnter,Disabled..另一个组控制的是Checked,UnChecked。

    6 VisualState里面是定义动画的,你在代码中Highlight的VisualState是在MouseOver的时候会被触发的。每个VisualState在什么情况下被触发也是需要定义的。比如要在Button Click的时候触发一个VisualState,可以在Button.Click事件中使用一下代码

    VisualStateManager.GoToState(this, [VisualStateName], false);

    http://msdn.microsoft.com/en-us/library/system.windows.visualstatemanager.gotostate(v=vs.95).aspx

    7. 这里两个Rectangle是定义在样式中的。根据需要定义的。比如根据名称我猜测一个是用作背景颜色,另一个实现背景渐变的效果。

    8. 我建议你在Expression Blend中查看Style,这样可以看到样式中每个控件的效果,也就理解为什么要定义了。

    9. ContentControl中可以使用ContentPresenter定义其内容。

    具体例子请参考http://msdn.microsoft.com/en-us/library/system.windows.controls.contentpresenter(v=vs.95).aspx

    10. XAML的一大特点就是及时可见。所以比较方便的方法就是在Expression Blend中先学习Silverlight控件的内部的Template看一下定义的方法和结构。

    对于其他的一些控件不了解的可以直接在msdn文档中搜索,其中都有很详细的解释。

    祝学习顺利。


    • 已编辑 Shi Ding 2012年7月17日 6:38
    • 已标记为答案 Shi Ding 2012年7月30日 18:02
    2012年7月17日 6:37
  • 你好,

    对于你提出的问题,以下是解答

    问题1:没看到“<ColorAnimation/>”有起到什么作用?

    请尝试在控件的某个事件处理方法中添加一下语句。如在MouseEnter event handler中添加一下语句,并观察当鼠标进入空间之后控件的颜色是否有变化。

    VisualStateManager.GoToState(this, "MouseOver", false);

    问题2:看上去好像“ContentPresenter”起主要作用的,对吧?

    不是很清楚你所指的起作用具体指什么。ContentPresenter是存放显示在控件内内容的元素。

    像这样的模板,是不是必须要使用“ExpressionBlend”来定义。   用“VS”来定义是不是太麻烦了。。。

    确实,如果在ExpressionBlend中可以实现可视化的操作相比VisualStudio来说很方便。

    • 已标记为答案 Shi Ding 2012年7月30日 18:02
    2012年7月23日 6:09

全部回复

  • 你好,

    建议可以将问题拆分,在一个帖子中只问一个问题,并且在题目中写出具体的问题,以便于其他人搜索提高现有资源利用率。

    1。Style的其中一种Implicity Style隐式样式可以实现你所要的功能。就是就算在DataGrid中不设置HeaderStyle也一样可以自动使DataGrid应用相应的样式。将现有的样式改为隐式很简单,就是去掉style的x:key属性即可。

    2。BaseOn可以理解为继承,样式A BasedOn设为样式B,则B里面所设定的样式直接就应用于样式A。

    3,4,5. VisualStateGroup是多个VisualState形成的一个组。如果添加VisualState一定要求放在一个VisualStateGroup中。一个样式中可以含有多个VisualStateGroup将相关的VisualState放在一个组里,比如CheckBox的VisualState分为两个组,一个主要控制基本的动画,比如MouseOver, MouseEnter,Disabled..另一个组控制的是Checked,UnChecked。

    6 VisualState里面是定义动画的,你在代码中Highlight的VisualState是在MouseOver的时候会被触发的。每个VisualState在什么情况下被触发也是需要定义的。比如要在Button Click的时候触发一个VisualState,可以在Button.Click事件中使用一下代码

    VisualStateManager.GoToState(this, [VisualStateName], false);

    http://msdn.microsoft.com/en-us/library/system.windows.visualstatemanager.gotostate(v=vs.95).aspx

    7. 这里两个Rectangle是定义在样式中的。根据需要定义的。比如根据名称我猜测一个是用作背景颜色,另一个实现背景渐变的效果。

    8. 我建议你在Expression Blend中查看Style,这样可以看到样式中每个控件的效果,也就理解为什么要定义了。

    9. ContentControl中可以使用ContentPresenter定义其内容。

    具体例子请参考http://msdn.microsoft.com/en-us/library/system.windows.controls.contentpresenter(v=vs.95).aspx

    10. XAML的一大特点就是及时可见。所以比较方便的方法就是在Expression Blend中先学习Silverlight控件的内部的Template看一下定义的方法和结构。

    对于其他的一些控件不了解的可以直接在msdn文档中搜索,其中都有很详细的解释。

    祝学习顺利。


    • 已编辑 Shi Ding 2012年7月17日 6:38
    • 已标记为答案 Shi Ding 2012年7月30日 18:02
    2012年7月17日 6:37
  • 谢谢您,非常感谢。

    “XAML”的对应效果如下图:

    问题1:没看到“<ColorAnimation/>”有起到什么作用?

    问题2:看上去好像“ContentPresenter”起主要作用的,对吧?


    Science and technology is my lover.

    2012年7月18日 8:57
  • 你好,

    建议可以将问题拆分,在一个帖子中只问一个问题,并且在题目中写出具体的问题,以便于其他人搜索提高现有资源利用率。

    1。Style的其中一种Implicity Style隐式样式可以实现你所要的功能。就是就算在DataGrid中不设置HeaderStyle也一样可以自动使DataGrid应用相应的样式。将现有的样式改为隐式很简单,就是去掉style的x:key属性即可。

    2。BaseOn可以理解为继承,样式A BasedOn设为样式B,则B里面所设定的样式直接就应用于样式A。

    3,4,5. VisualStateGroup是多个VisualState形成的一个组。如果添加VisualState一定要求放在一个VisualStateGroup中。一个样式中可以含有多个VisualStateGroup将相关的VisualState放在一个组里,比如CheckBox的VisualState分为两个组,一个主要控制基本的动画,比如MouseOver, MouseEnter,Disabled..另一个组控制的是Checked,UnChecked。

    6 VisualState里面是定义动画的,你在代码中Highlight的VisualState是在MouseOver的时候会被触发的。每个VisualState在什么情况下被触发也是需要定义的。比如要在Button Click的时候触发一个VisualState,可以在Button.Click事件中使用一下代码

    VisualStateManager.GoToState(this, [VisualStateName], false);

    http://msdn.microsoft.com/en-us/library/system.windows.visualstatemanager.gotostate(v=vs.95).aspx

    7. 这里两个Rectangle是定义在样式中的。根据需要定义的。比如根据名称我猜测一个是用作背景颜色,另一个实现背景渐变的效果。

    8. 我建议你在Expression Blend中查看Style,这样可以看到样式中每个控件的效果,也就理解为什么要定义了。

    9. ContentControl中可以使用ContentPresenter定义其内容。

    具体例子请参考http://msdn.microsoft.com/en-us/library/system.windows.controls.contentpresenter(v=vs.95).aspx

    10. XAML的一大特点就是及时可见。所以比较方便的方法就是在Expression Blend中先学习Silverlight控件的内部的Template看一下定义的方法和结构。

    对于其他的一些控件不了解的可以直接在msdn文档中搜索,其中都有很详细的解释。

    祝学习顺利。


    像这样的模板,是不是必须要使用“ExpressionBlend”来定义。   用“VS”来定义是不是太麻烦了。。。


    Science and technology is my lover.

    2012年7月23日 4:47
  • 你好,

    对于你提出的问题,以下是解答

    问题1:没看到“<ColorAnimation/>”有起到什么作用?

    请尝试在控件的某个事件处理方法中添加一下语句。如在MouseEnter event handler中添加一下语句,并观察当鼠标进入空间之后控件的颜色是否有变化。

    VisualStateManager.GoToState(this, "MouseOver", false);

    问题2:看上去好像“ContentPresenter”起主要作用的,对吧?

    不是很清楚你所指的起作用具体指什么。ContentPresenter是存放显示在控件内内容的元素。

    像这样的模板,是不是必须要使用“ExpressionBlend”来定义。   用“VS”来定义是不是太麻烦了。。。

    确实,如果在ExpressionBlend中可以实现可视化的操作相比VisualStudio来说很方便。

    • 已标记为答案 Shi Ding 2012年7月30日 18:02
    2012年7月23日 6:09
  • 你好,

    对于你提出的问题,以下是解答

    问题1:没看到“<ColorAnimation/>”有起到什么作用?

    请尝试在控件的某个事件处理方法中添加一下语句。如在MouseEnter event handler中添加一下语句,并观察当鼠标进入空间之后控件的颜色是否有变化。

    VisualStateManager.GoToState(this, "MouseOver", false);

    问题2:看上去好像“ContentPresenter”起主要作用的,对吧?

    不是很清楚你所指的起作用具体指什么。ContentPresenter是存放显示在控件内内容的元素。

    像这样的模板,是不是必须要使用“ExpressionBlend”来定义。   用“VS”来定义是不是太麻烦了。。。

    确实,如果在ExpressionBlend中可以实现可视化的操作相比VisualStudio来说很方便。

    大师,您能不能确定下,这个实例是“修改的DataGrid模板”,还是“自定义的控件”???


    Science and technology is my lover.

    2012年7月26日 1:01
  • 你好,

     <Style x:Key="DataGridHeaderStyle" TargetType="sdk:DataGridColumnHeader">

    从上面这行代码中看因为TargetType设定为sdk:DataGridColumnHeader,这个应该是修改的当前的DataGridColumnHeader的模板。

    2012年7月26日 2:27