c# - WPF - 当网格开始切割元素时使元素消失

Question

我有一个高度不同的网格。随着高度的缩小，其中一些元素将开始被剪掉，导致外观相当丑陋。

我已经尝试绑定(bind)网格的 ActualHeight 并使用转换器使元素在硬编码高度处消失。但是，这相当困惑，如果不是真的需要，我不想对其进行硬编码。

还有其他方法可以解决这个问题吗？例如，以某种方式获取元素的位置并将它们与网格 ActualHeight 进行比较。

谢谢:)

更新，添加了 xaml 代码并在显示问题的图片下方。

对于第三行的网格，我添加了一个转换器，它在网格 ActualHeight 低于硬编码值时返回 Visibility.Hidden。

    <DataTemplate x:Key="leafContentTemplate" >
    <Border BorderThickness="5" Background="DimGray">
        <Grid Background="{Binding Tag.PriceChangeDirection, Converter={StaticResource ColorConverter}}" Name="StockGrid" >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <dxe:SparklineEdit Grid.Row="0" Grid.ColumnSpan="2" Grid.RowSpan="100" EditValue="{Binding Tag.Prices}"   Margin="0 5 0 0"  >
                <dxe:SparklineEdit.StyleSettings >
                    <dxe:AreaSparklineStyleSettings AreaOpacity="0.3" Brush="DarkBlue" />
                </dxe:SparklineEdit.StyleSettings>
                <dxe:SparklineEdit.PointArgumentRange>
                    <dxe:Range Auto="True"/>
                </dxe:SparklineEdit.PointArgumentRange>

            </dxe:SparklineEdit >

            <TextBlock Grid.Row="0" Text="{Binding Tag.Name}" FontSize="16"
                       Foreground="Black"/>
            <TextBlock Grid.Row="1" Text="{Binding Tag.Ticker}" 
                       Foreground="Black" FontSize="24"/>
            <TextBlock  Grid.Row="2" Text="{Binding Tag.Volume, StringFormat=Vol.: {0}}" FontSize="16"
                       Foreground="Black"  />
            <TextBlock Grid.Row="3"  Text="{Binding Tag.Trades, StringFormat=Trades: {0}}" FontSize="16"
                       Foreground="Black"  Visibility="{Binding ElementName=StockGrid, Path=ActualHeight, Converter={StaticResource HeightToVisibilityConverter}}" />

            <StackPanel Grid.Column="1" Grid.RowSpan="100"  Orientation="Vertical" Margin="0,0,10,10" VerticalAlignment="Bottom" HorizontalAlignment="Right" >
                <TextBlock  HorizontalAlignment="Right" Text="{Binding Tag.Price}" 
                       Foreground="White" FontSize="30"/>
                <Grid  HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,0,0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Column="0"  
                       Text="{Binding Tag.PercentPriceChange}" Foreground="White" FontSize="16"/>

                    <TextBlock  Grid.Column="1" Text="&#x25B2;" Visibility="{Binding Tag.IsPosValueChange,Converter={StaticResource BoolToVisibility}}" 
                            Foreground="White" Margin="10,0,0,0"  FontSize="16"/>
                    <TextBlock  Grid.Column="1" Text="&#x25BC;" Visibility="{Binding Tag.IsPosValueChange,Converter={StaticResource InverseBoolToVisibility}}" 
                            Foreground="White" Margin="10,0,0,0" FontSize="16" />
                </Grid>
            </StackPanel>
        </Grid>
    </Border>
</DataTemplate>

Answer 1

对于可重用的解决方案，您需要两件事:

1. StockGrid 的所有行设置为自动高度的实际高度(允许具有 * 高度的虚拟行)。
2. 充当 StockGrid 容器的网格的高度。高度设置为 *(= 等于根本未设置)。

我将您的 XAML 精简到极点

<Border BorderThickness="5" Background="DimGray">
    <Grid x:Name="Container">
        <Grid x:Name="StockGrid" >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <TextBlock Grid.Row="0" Text="Projector Forsikring" FontSize="16"
                       Foreground="Black"/>
            <TextBlock Grid.Row="1" Text="OSL.PROT" 
                       Foreground="Black" FontSize="24"/>
            <TextBlock  Grid.Row="2" Text="Vol.10000" FontSize="16"
                       Foreground="Black"  />
            <TextBlock Grid.Row="3"  Text="ProTrade" FontSize="16"
                       Foreground="Black">
                <TextBlock.Visibility>
                    <MultiBinding Converter="{StaticResource HeightToVisibilityConverter}">
                        <Binding ElementName="Container" Path="ActualHeight"/>
                        <Binding ElementName="StockGrid" Path="ActualHeight"/>
                    </MultiBinding>
                </TextBlock.Visibility>
            </TextBlock>
        </Grid>
    </Grid>
</Border>

IMultiValueConverter

public class HeightToVisibilityConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        double ContainerHeight = (double)values[0];
        double StockGridHeight = (double)values[1];

        if (ContainerHeight < StockGridHeight)
            return Visibility.Hidden;
        else
            return Visibility.Visible;
   }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

请注意，您可以更进一步。使用每一行中控件的 ActualHeights 的总和，而不是 StockGrid 的 ActualHeights 的总和。然后每个控件都可以拥有自己的转换器。