Question

我正在尝试在Expression Studio中为silverlight创建一个按钮模板。 Button是一个基本矩形，里面有另一个矩形，低透明度表示按钮上的“光泽”。按钮工作正常，除非高度改变，我需要“光泽”矩形的高度也自动增加，以保持其正常的宽高比。无论如何这样做？我可以将高度设置为另一个的“50％”吗？

谢谢，

以下是我的模板代码：

<Style x:Key="CloseButtonBlack" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="grid">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.2"/>
                                        <VisualTransition GeneratedDuration="0" To="Pressed"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0.495" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" To="#FF333333" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" To="#FF434343" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="Button" Fill="Black" Stroke="#FF2D2D2D"/>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="X"/>
                            <Rectangle x:Name="Gloss" Fill="White" Height="12" Margin="1, 1, 1, 0" Stroke="#FF2D2D2D" VerticalAlignment="Top" Opacity="0.25"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 1

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/> 
        <RowDefinition/> 
    </Grid.RowDefinitions>

  <Rectangle x:Name="Button" Grid.RowSpan="2" .../>

  <ContentPresenter Grid.RowSpan="2" .../>

  <Rectangle x:Name="Gloss" Grid.Row="1" .../>
  <!-- Remove the Height="12" from this element -->
</Grid>

这将形成一个2行网格，其中每行占总高度的50％，并将“Gloss”矩形放在第二行，占据网格的下半部分，同时将“Button”矩形拉伸到整个高度。

XAML按钮模板 - 使按钮高度自动缩放光泽效果

1 个答案: