60英寸屏幕上的多個控件的WPF屏幕顯示

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中的項目適當的寬度和/或高度設置。

一個簡單的方法來獲得堆棧面板統一項目的間距是使用填充或邊距。

通過使用作用域樣式，可以輕鬆地爲堆棧面板內的某種類型的所有項設置默認填充/邊距（請參閱示例）。

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