Question

我必须连续显示10个相同的用户控件。每个控件将包含左侧和右侧的产品图像，其中将包含产品的名字，姓氏和类别。控件必须与它们之间的适当空间对齐，并且其中的文本必须是可读的。我在gridview行中使用堆栈面板，每个控件占窗口总宽度的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();
    }
}

Answer 1

堆栈面板将始终根据其大小缩小以适合其子项。

如果你没有给stackpanel的子节点一个宽度和/或高度（取决于stackpanel的方向），它们的默认宽度/高度为0。

只需在堆叠面板中给出适当宽度和/或高度设置的项目。

一种简单的方法是使堆叠面板中的项目间隔均匀，即使用填充或边距。

您可以使用范围样式轻松地为堆叠面板内的特定类型的所有项目设置默认填充/边距（请参阅示例）。

<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>

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

1 个答案: