WPF屏幕在60英寸屏幕上显示多个控件

本文关键字：屏幕 显示 控件 WPF | 更新日期: 2023-09-27 17:58:26

我必须在一行中显示10个相同的用户控件。每个控件的左侧将包含产品的图像，右侧将垂直包含产品的名字、姓氏和类别。控件必须与它们之间的适当空间对齐，并且其中的文本必须可读。我在网格视图行中使用堆栈面板，每个控件都有窗口总宽度的10%。我的代码中的问题是，控件之间没有空格，控件中的文本不可读。

  <StackPanel  Orientation="Horizontal" Grid.Row="3"  VerticalAlignment="Bottom"  Margin="0,0,5,0" >
                            <my:ScannedItemUserControl  x:Name="ScannedProduct12" Margin="0,8,0,8"
                                                        Width="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=MyWindow, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.1}"
                FontSize="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=ScannedProduct12, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.06}"
                                                        />
                            <my:ScannedItemUserControl  x:Name="ScannedProduct11" Margin="0,8,0,8" Width="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=MyWindow, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.1}"
                FontSize="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=ScannedProduct11, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.06}"/>
                            <my:ScannedItemUserControl  x:Name="ScannedProduct10" Margin="0,8,0,8" HorizontalAlignment="Right" Width="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=MyWindow, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.1}"
                FontSize="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=ScannedProduct10, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.06}"/>
                            <my:ScannedItemUserControl  x:Name="ScannedProduct9"   Margin="0,8,0,8" Width="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=MyWindow, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.1}"
                FontSize="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=ScannedProduct9, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.06}"/>
                            <my:ScannedItemUserControl  x:Name="ScannedProduct8" Margin="0,8,0,8" Width="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=MyWindow, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.1}"
                            FontSize="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=ScannedProduct8, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.06}"/>
                            <my:ScannedItemUserControl  x:Name="ScannedProduct7" Margin="0,8,0,8" Width="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=MyWindow, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.1}"
                FontSize="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=ScannedProduct7, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.06}"/>
                            <my:ScannedItemUserControl  x:Name="ScannedProduct6" Margin="0,8,0,8" Width="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=MyWindow, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.1}"
                FontSize="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=ScannedProduct6, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.06}"/>
                            <my:ScannedItemUserControl  x:Name="ScannedProduct5" Margin="0,8,0,8" HorizontalAlignment="Right" Width="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=MyWindow, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.1}"
                FontSize="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=ScannedProduct5, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.06}"/>
                            <my:ScannedItemUserControl  x:Name="ScannedProduct4" Margin="0,8,0,8" HorizontalAlignment="Right" Width="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=MyWindow, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.1}"
                FontSize="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=ScannedProduct4, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.06}"/>
                            <my:ScannedItemUserControl  x:Name="ScannedProduct3" Margin="0,8,0,8" HorizontalAlignment="Right" Width="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=MyWindow, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.1}"
                FontSize="{Binding 
                                       Converter={StaticResource PercentageConverter}, 
                                       ElementName=ScannedProduct3, 
                                       Path=ActualWidth, 
                                       ConverterParameter=0.06}"/>
                        </StackPanel>

public class PercentageConverter : IValueConverter
{
    public object Convert(object value,
        Type targetType,
        object parameter,
        System.Globalization.CultureInfo culture)
    {
        return System.Convert.ToDouble(value) *
               System.Convert.ToDouble(parameter);
    }
    public object ConvertBack(object value,
        Type targetType,
        object parameter,
        System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

WPF屏幕在60英寸屏幕上显示多个控件

堆叠面板将始终根据其子对象的大小进行收缩以适合其子对象。

如果不给堆叠面板的子对象宽度和/或高度（取决于堆叠面板的方向），则它们的默认宽度/高度为0。

只需对堆叠面板中的项目进行适当的宽度和/或高度设置。

获得堆叠面板统一中项目间距的一个简单方法是使用填充或边距。

通过使用作用域样式，可以很容易地为stackpanel内特定类型的所有项设置默认填充/边距（请参见示例）。

<StackPanel orientation="vertical">
   <StackPanel.Resources>
        <Style TargetType="{x:Type Label}">
            <Setter Property="Margin" Value="0,5,0,5"/>
        </Style>
   </StackPanel.Resources> 
   <Label height="32" horizontalAlignment="stretch"> visible label with spacing </Label>
   <Label> invisible label (does have a margin though) </Label>
</StackPanel>
相关文章：