Question

我试图在TILEs的时刻创建一个包含按钮的xaml UI布局。它们应该有图像和文本，并且它们都应该根据屏幕大小调整大小。

您如何为此添加可调整大小的文本/标题/标题？提前谢谢你。

    <Grid Grid.Column="0" x:Name="MenuGrid" UseLayoutRounding="True" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="3*" MaxHeight="150"/>
            <RowDefinition Height="3*" MinHeight="75" />
            <RowDefinition Height="3*" MinHeight="75" />
            <RowDefinition Height="3*" MinHeight="75" />
        </Grid.RowDefinitions>
        <Image RenderOptions.BitmapScalingMode="Fant" Grid.Column="0" Grid.Row="0" Source="/Resources/logo.png" VerticalAlignment="Stretch" StretchDirection="DownOnly"/>

        <controls:Tile Name="tileInvoice" Width="Auto" Height="Auto" Grid.Row="1" VerticalAlignment="Stretch" Margin="0,0,0,0" ToolTip="Invoice">
            <controls:Tile.Background>
                <ImageBrush Stretch="Uniform" ImageSource="/Resources/invoice.png"/>
            </controls:Tile.Background>
        </controls:Tile>
        <controls:Tile Name="tileCustomer" Width="Auto" Height="Auto" Grid.Row="2" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" Margin="0,0,0,0">
            <controls:Tile.Background>
                <ImageBrush Stretch="Uniform" ImageSource="/Resources/customer.png" />
            </controls:Tile.Background>
        </controls:Tile>
        <controls:Tile Name="tileItem" Width="Auto" Height="Auto" Grid.Row="3" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" Margin="0,0,0,0">
            <controls:Tile.Background>
                <ImageBrush Stretch="Uniform" ImageSource="/Resources/item.png"/>
            </controls:Tile.Background>
        </controls:Tile>
    </Grid>

Answer 1

这不是MahApps特定的，它与xaml布局有关。如果您希望可伸缩控件将它们包装在Viewbox

中

<Viewbox>
    <controls:Tile Name="tileInvoice" Width="Auto" Height="Auto" Grid.Row="1" VerticalAlignment="Stretch" Margin="0,0,0,0" ToolTip="Invoice">
        <controls:Tile.Background>
            <ImageBrush Stretch="Uniform" ImageSource="/Resources/invoice.png"/>
        </controls:Tile.Background>
    </controls:Tile>
</Viewbox>

Answer 2

我使用了这段代码。

<Viewbox Grid.Row="1">
<controls:Tile Name="tileInvoice" Click="tileInvoice_Click" VerticalAlignment="Stretch" ToolTip="{x:Static resx:omniLang.Invoice}">
<controls:Tile.Background>
<ImageBrush ImageSource="Resources/invoice.png" Stretch="Uniform"/>
</controls:Tile.Background>
<TextBlock Name="headerInvoice" Text="{x:Static resx:omniLang.Invoice}" FontSize="22" Foreground="Black" FontWeight="Bold" VerticalAlignment="Center" Margin="0,100,0,0" />
</controls:Tile>
</Viewbox>

XAML UI按钮。可调整大小的图像和文本

2 个答案: