首页 文章

UWP XAML按钮，在Hub中包含图像和文本[复制]

提问于
浏览 次
0

这个问题在这里已有答案：

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

我想要实现的是主页上的集线器控件中的主导航页面类型 . 在每个HubSection，我将在2列网格的每列上有按钮，它将包含按钮 . 我曾尝试类似的东西to this post但是当我使用图像而不是文本块时，调试器仍未能附加到我的UWP应用程序 .

基本上，我在下面分享了我的代码）
enter image description here

但我想要实现的是每个按钮都有自己的图像背景和一个单独的TextBlock，在按钮的底部中央有半透明背景......（我只是照片购买它，这是我正在尝试的东西实现...）

enter image description here

所以这就是我到目前为止所尝试的......我也尝试了相关小组，但没有运气......

<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>
c# xaml uwp

1 回答

  • 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>
    回复于

相关问题