与之前 Grid.Column 中的 UIElement 具有相同高度的图像按钮答案

【问题标题】：Button with Image with same height as UIElement in previous Grid.Column与之前 Grid.Column 中的 UIElement 具有相同高度的图像按钮
【发布时间】：2015-12-15 15:40:15
【问题描述】：

我对 WPF 很陌生，所以请多多包涵。我想在它旁边显示带有按钮的组合框。按钮将包含图像。图像尺寸为 64x64。我想将组合框高度作为整个 Grid 行的主高度。我需要强制带有图像的按钮与组合框一样高。我不想指定任何硬编码值（稍后我将使用 DevExpress 主题）。

我想我有可行的解决方案（至少在运行时），但我想咨询更有经验的人。解决方案是基于按钮高度绑定到组合框 ActualHeight。这在运行时工作得很好。但在设计时按钮尺寸要大得多（它以原始尺寸显示图像）。

我的解决方案是推荐的吗？如何解决设计时间问题？我在设计时看到了在运行时看不到的东西，这让我发疯。

我正在使用 VS 2015 社区版

XAML

<Window x:Class="Issue.Window1"
    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"
    xmlns:local="clr-namespace:Issue"
    mc:Ignorable="d"
    SizeToContent="WidthAndHeight"
    ResizeMode="NoResize"
    Title="Window1">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="160"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
        <ComboBox x:Name="Cbx"  Grid.Column="0" Grid.Row="0"/>
    <Button Grid.Column="1" Grid.Row="0" Height="{Binding ElementName=Cbx, Path=ActualHeight}">
        <Image Source="Play.png"/>
    </Button>
    <Label Content="Hello" Grid.Column="0" Grid.Row="1"/>
    <Label Content="Big Hello" Grid.Column="0" Grid.Row="2" FontSize="15"/>
</Grid>

图像 - 设计时/运行时

谢谢，

【问题讨论】：

将图像的高度绑定到组合框的 ActualHeight 属性。像 height={Binding ElementName=comboBox, Path=ActualHeight}
将图像高度绑定到 ActualHeight 的结果实际上比绑定 Button 的高度更差。图像在设计时甚至在运行时都要大得多
绑定到组合框的实际高度是完全正确的。问题是 VS 设计器没有执行运行时代码。在您使用SizeToContent="WidthAndHeight" 的特殊示例中，我想不出如何解决这个问题。
是的，抱歉，尝试在按钮而不是图像上设置它是对的。如果设计时间仍然是一个问题，我不确定。您可以尝试将行高设置为自动或将按钮或图像放在视图框中 - 如果任何一种工作，它仍然是不必要的标记。

标签： c# wpf

【解决方案1】：

Canvas 可以解决这个问题。画布不会根据内容改变其大小，因此它可以包含比画布更大的内容，并且画布仍然不会改变放置画布的网格的行/列的高度/宽度。因此，将按钮与图像高度绑定在运行时甚至在设计时就像一个奇迹。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="160"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
        <RowDefinition/>
    </Grid.RowDefinitions>
    <ComboBox x:Name="Cbx"  Grid.Column="0" Grid.Row="0"/>
    <Canvas Grid.Column="1" Grid.Row="0" Width="{Binding ElementName=Cbx, Path=ActualHeight}">
        <Button Height="{Binding ElementName=Cbx, Path=ActualHeight}">
            <Image Source="Play.png"/>
        </Button>
    </Canvas>
    <Label Content="Hello" Grid.Column="0" Grid.Row="1"/>
    <Label Content="Big Hello" Grid.Column="0" Grid.Row="2" FontSize="15"/>
</Grid>

【讨论】：