0

有人可以给我一个示例，说明如何使用 XAML 设置具有三种状态（悬停、正常、按下）的按钮。我希望按钮的整个区域都覆盖有图像（三种不同状态中的每一种），并且我希望文本位于顶部，并且对于不同的状态也具有三种不同的颜色。我已经有了类似的东西（文本块上没有颜色状态）。我此时遇到的问题是文本块阻止了下方按钮的输入事件（我也没有实现文本块的颜色更改......

当前代码：

<DataTemplate x:Name="SubjectItemTemplate">
    <Canvas Width="225" Height="225">
        <Button Canvas.Left="0" Canvas.Top="0"
                Command="{Binding ElementName=LayoutRoot, Path=DataContext.NavigateToUnitsPage}"
                CommandParameter="{Binding}">
            <Button.Template>
                <ControlTemplate>
                    <Grid Background="{Binding LightThemeColor}" Width="205" Height="205">

                        <controls:ImageButton HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,0,0,0"
                                              NormalStateImageSource="{Binding ImageUriNormal}"
                                              HoverStateImageSource="{Binding ImageUriHover}"
                                              PressedStateImageSource="{Binding ImageUriPressed}" Command="{Binding ElementName=LayoutRoot, Path=DataContext.NavigateToUnitsPage}"
                CommandParameter="{Binding}"/>
                        <TextBlock Text="{Binding Name}" FontSize="18" TextWrapping="Wrap" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,168,0,0" />

                    </Grid>
                </ControlTemplate>
            </Button.Template>

        </Button>
    </Canvas>
</DataTemplate>
4

1 回答 1

0

ImageButton事件没有按预期处理的原因TextBlock是因为TextBlock位于与 内联ImageButton并且不包含在ImageButton. 要改变这一点，TextBlock必须放在ImageButton.

 <controls:ImageButton HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,0,0,0"
      NormalStateImageSource="{Binding ImageUriNormal}"
      HoverStateImageSource="{Binding ImageUriHover}"
      PressedStateImageSource="{Binding ImageUriPressed}" Command="{Binding ElementName=LayoutRoot, Path=DataContext.NavigateToUnitsPage}" CommandParameter="{Binding}" >
      <TextBlock Text="{Binding Name}" FontSize="18" TextWrapping="Wrap" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,168,0,0" />
 </controls:ImageButton>
于 2012-12-18T18:44:28.327 回答