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>

UWP XAML按钮，Hub中包含图像和文本

1 个答案: