集线器中带有图像和文本的 UWP XAML 按钮 [重复]

Question

我正在学习在 UWP 中使用 XAML 实现某些布局的不同方法（我知道我迟到了，但我刚开始使用 UWP 的东西！）

我想要实现的是我主页上的集线器控件中的一种主导航页面。在每个 HubSection 中，我将在 2 列网格的每一列上都有按钮，其中包含按钮。我尝试过类似的to this post，但是当我使用图像而不是文本块时，调试器一直无法附加到我的 UWP 应用程序。

基本上，到目前为止我所拥有的是这样的：（我在下面分享了我的代码）

但我想要实现的是每个按钮都有自己的图像背景和一个单独的 TextBlock，在按钮的底部中心有一个半透明背景......（我只用照片购物过，就是这样我正在努力实现...）

所以这是我到目前为止所尝试的......我也尝试了相关面板但没有运气......

<Grid>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="200" />
    <ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,10,10,0">
    <Button HorizontalAlignment="Stretch">
    <Grid>
        <TextBlock HorizontalAlignment="Center">Column 0 Item 1</TextBlock>
        <Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
    </Grid>
<StackPanel>

<TextBlock>Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Grid>

我的完整代码在这个页面看起来像这样。

<Page
    x:Class="VaultManager.Terminal.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
    mc:Ignorable="d">


<Grid Background="Black">
    <Hub SectionHeaderClick="Hub_SectionHeaderClick">
        <Hub.Header>
            <Grid Margin="0,20,0,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="80"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <TextBlock x:Name="pageTitle" Text="My Hub Sample" Style="{StaticResource SubheaderTextBlockStyle}" Grid.Column="1" IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Top"/>
            </Grid>
        </Hub.Header>
        <HubSection Header="Overview">
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="200" />
                        <ColumnDefinition Width="200" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="150" />
                    </Grid.RowDefinitions>
                    <StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,10,10,0">
                        <Button HorizontalAlignment="Stretch">
                            <StackPanel>
                                <TextBlock>Column 0 Item 1</TextBlock>
                                <Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
                            </StackPanel>
                        </Button>
                        <Button HorizontalAlignment="Stretch" >
                            <RelativePanel>
                                <TextBlock>Column 0 Item 2</TextBlock>
                                <Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
                            </RelativePanel>
                        </Button>
                    </StackPanel>

                    <StackPanel Orientation="Vertical" Grid.Column="1" Margin="10,10,10,10">
                        <Button HorizontalAlignment="Stretch">
                            <StackPanel>
                                <TextBlock>Column 1 Item 1</TextBlock>
                                <Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
                            </StackPanel>
                        </Button>
                        <Button HorizontalAlignment="Stretch" >
                            <StackPanel>
                                <TextBlock>Column 1 Item 2</TextBlock>
                                <Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
                            </StackPanel>
                        </Button>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </HubSection>
        <HubSection Header="Videos" Name="Videos">
        <!-- yada yada -->
        </HubSection>
        <HubSection Header="Audios" Name="Audios">
        <!-- blah blah -->
        </HubSection>
    </Hub>
</Grid>

Answer 1

为我们提供了所有这些信息，做得很好。您可能想看看here，因为该问题中的提问者似乎遇到了类似的问题。回答者建议使用 Grid 而不是 StackPanel。希望有帮助。之后，您应该能够调整文本的透明度。如果您使用的是 Visual Studio，您只需单击文本元素并从“属性”选项卡调整背景画笔。带有图像的按钮应如下所示：

<Button HorizontalAlignment="Stretch">
                            <Grid>
                                <TextBlock Text = "Column 0 Item 1">
                                    <TextBlock.Background>
                                        <SolidColorBrush Color="(**Colour here**)"  Opacity = "(**Opacity Here {1 being opaque and 0 being transparent}**)/>
                                    </TextBlock.Background></TextBlock>
                                <Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
                            </Grid>
                        </Button>