读书人

WPF中Button的ControlTemplate的有关问

发布时间: 2012-04-20 15:27:03 作者: rapoo

WPF中Button的ControlTemplate的问题
现在有一个Button,为了在贴图后去掉默认的边框用了ControlTemplate,同时实现一个当鼠标划过时换图片的效果

XML code
<Window.Resources>        <Style x:Key="ss" TargetType="Image">            <Setter Property="Source" Value="/image/nav-button.png"/>            <Style.Triggers>                <Trigger Property="Image.IsMouseOver" Value="true">                    <Setter Property="Source" Value="/image/nav-button_hover.png"/>                </Trigger>            </Style.Triggers>        </Style>    </Window.Resources> <Button Content="用户查找" Height="23" HorizontalAlignment="Left" Margin="-161,32,0,0" Name="bt_Find" VerticalAlignment="Top" Width="95" Click="bt_Find_Click">            <Button.Template>                <ControlTemplate>                    <Grid>                         <Image Name="Image_Find" Style="{StaticResource ss}" />                        <TextBlock Text="     用户查找" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>                    </Grid>                </ControlTemplate>            </Button.Template>        </Button>


但是,这段代码的问题在于,如果把TextBlock放在Image下,文字将无法显示,如果放在Image上面,换图片的效果就没法实现了,请问大家,应该怎么办啊。。。谢谢各位。。。

[解决办法]
感觉是不是重叠了啊?
用stackpanel试试?
[解决办法]
写了一点代码,看看对你有没有帮助,我测试了下,只要鼠标移到按钮上,图片就能换,不论是在文字上,还是不在文字上。
C# code
 
<!--按钮背景画刷-->
<LinearGradientBrush x:Key="buttonBackgroundBrush">
<GradientStop Offset="0" Color="Beige"/>
<GradientStop Offset="1" Color="White"/>
</LinearGradientBrush>

<!--按钮模板定义-->
<ControlTemplate x:Key="TestButtonTemplate" TargetType="{x:Type Button}">
<Border x:Name="border" BorderThickness="1" BorderBrush="Black"
Background="{StaticResource buttonBackgroundBrush}"
CornerRadius="10">
<Grid>
<Image x:Name="image" Source="a.png"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="Fill" Height="50" Width="50"/>
<Label Content="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</Border>

<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="image" Property="Source" Value="b.png"/>
</Trigger>
</ControlTemplate.Triggers>


</ControlTemplate>

<!--按钮样式定义,实际只需要在Button的Style中引用这个就好-->
<Style x:Key="TestButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="bold"/>
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Foreground" Value="Blue"/>
<Setter Property="Template" Value="{StaticResource TestButtonTemplate}"/>
</Style>

读书人网 >CAD教程

热点推荐