ImageButton頂部的TextBlock（Windows 8 XAML / C＃）

Question

誰能給我一個示例，說明如何使用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>

Answer 1

無法使用TextBlock按預期方式處理ImageButton事件的原因是因為TextBlock與ImageButton處於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>