如何将 UniForm 图像拉伸到 WINRT 中的按钮内容
How to stretch UniForm image to buttons content in WINRT
我正在使用 CameraCaptureUI API 来捕获和保存我在按钮中加载的图片,如下所示 XAML。
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" VerticalAlignment="Center" HorizontalAlignment="Center">
<StackPanel>
<Button Width="150" Height="150">
<Button.Content>
<Image x:Name="coffejpg" Stretch="Uniform" />
</Button.Content>
</Button>
</StackPanel>
</Grid>
</Page>
代码背后的代码:
namespace App1
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
coffejpg.Source = new BitmapImage(new Uri("ms-appx:///Assets/coffe.jpg"));
}
}
}
这是我用网络摄像头捕获的咖啡文件的加载结果。
如何将图片拉伸到按钮边框。我已经尝试使用图像的 VerticalAlignment
和 HorizontalAlignment
属性。还尝试使用高度和宽度,但它们会使图片变形。
Stretch 属性 必须是 Uniform 显式
这只是一个测试场景。
如果您坚持使用Stretch=Uniform
,那么您需要了解它的作用。它保留图像的纵横比。因此,如果原始图片为 800x600,则图像将保持 4x3 的比例。您正试图将图像放在 1x1 比例按钮中,但图像本身不是 1x1 比例。所以按钮周围会有空白space。
如果您不想使用 UniformToFill,那么另一个解决方案是更改按钮的大小。
尝试在按钮上只设置一个维度。
<Button Width="150" Height="Auto">
或
<Button Width="Auto" Height="150">
我正在使用 CameraCaptureUI API 来捕获和保存我在按钮中加载的图片,如下所示 XAML。
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" VerticalAlignment="Center" HorizontalAlignment="Center">
<StackPanel>
<Button Width="150" Height="150">
<Button.Content>
<Image x:Name="coffejpg" Stretch="Uniform" />
</Button.Content>
</Button>
</StackPanel>
</Grid>
</Page>
代码背后的代码:
namespace App1
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
coffejpg.Source = new BitmapImage(new Uri("ms-appx:///Assets/coffe.jpg"));
}
}
}
这是我用网络摄像头捕获的咖啡文件的加载结果。
如何将图片拉伸到按钮边框。我已经尝试使用图像的 VerticalAlignment
和 HorizontalAlignment
属性。还尝试使用高度和宽度,但它们会使图片变形。
Stretch 属性 必须是 Uniform 显式
这只是一个测试场景。
如果您坚持使用Stretch=Uniform
,那么您需要了解它的作用。它保留图像的纵横比。因此,如果原始图片为 800x600,则图像将保持 4x3 的比例。您正试图将图像放在 1x1 比例按钮中,但图像本身不是 1x1 比例。所以按钮周围会有空白space。
如果您不想使用 UniformToFill,那么另一个解决方案是更改按钮的大小。
尝试在按钮上只设置一个维度。
<Button Width="150" Height="Auto">
或
<Button Width="Auto" Height="150">