Question

我正在尝试创建一个有三个位图的wpf按钮， 1.正常图像 2.悬停图像 3.按下图像。

我使用了下面给出的代码。

WPF: IsPressed trigger of ControlTemplate not working

现在我需要让这个位图按钮包含一个内部图像和文本。

 <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="300"/>
            <RowDefinition Height="300"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <loc:ImageButton Margin="10"  Width="150" Height="186" NormalImageSource="Images\tile.png" HoverImageSource="Images\tile_overlay_hovered.png" PushedImageSource="Images\tile_overlay_pressed.png">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="142"/>
                    <RowDefinition Height="44"/>
                </Grid.RowDefinitions>
                <Image Source="Images\InnerImage.png" Width="70" Stretch="Uniform" Height="70" Margin="40"/>
                <TextBlock Text="Name" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </loc:ImageButton>


    </Grid>

我的风格xaml。

<Style TargetType="{x:Type local:ImageButton}">
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Image Name="image" Source="{Binding NormalImageSource, RelativeSource={RelativeSource TemplatedParent}}" Stretch="None" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Button.IsMouseOver" Value="True">
                            <Setter TargetName="image" Property="Source"  Value="{Binding HoverImageSource, RelativeSource={RelativeSource TemplatedParent}}"/>
                        </Trigger>
                        <Trigger Property="Button.IsPressed" Value="True">
                            <Setter TargetName="image" Property="Source"  Value="{Binding PushedImageSource, RelativeSource={RelativeSource TemplatedParent}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

不幸的是，我无法显示内部图像和文本？任何类型的指针将不胜感激。我的方法有问题吗？

Answer 1

只有在controltemplate中包含contentpresenter时，才会显示添加到按钮的内容。我不知道你希望按钮看起来像什么，但是这个控制模板将显示你的网格，内部图像位于外部图像的右侧。

<ControlTemplate TargetType="{x:Type Button}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Image Name="image" Source="{Binding NormalImageSource, RelativeSource={RelativeSource TemplatedParent}}" Stretch="None" />
        <ContentPresenter Grid.Column="1"/>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="Button.IsMouseOver" Value="True">
            <Setter TargetName="image" Property="Source"  Value="{Binding HoverImageSource, RelativeSource={RelativeSource TemplatedParent}}"/>
        </Trigger>
        <Trigger Property="Button.IsPressed" Value="True">
            <Setter TargetName="image" Property="Source"  Value="{Binding PushedImageSource, RelativeSource={RelativeSource TemplatedParent}}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

在WPF-内部图像中没有显示外部图像和内部图像的按钮

1 个答案: