我被委托根据这个设计做一扇Windows：
我为它选择了ListView容器。如何在单元格中创建文本框很清楚，但不知道如何实现列之间的缩进和行的不同颜色。我什么也想不起来。我该怎么做呢？
h5qlskok1#
我会在itemtemplate中使用一个带有网格和列的列表框。使标题行成为一个单独的网格，并具有匹配的列。如果列需要可变宽度，请使用Sharedsizegroup在标题中创建列。然后，可以将边框放在一行中，并使用columnspan和cornerradius将其圆整。稍后在xaml中声明的文本框将获得更高的z索引并显示在顶部。如果你想要一个间隙，没问题，你可以有一个什么都没有的列。这里有一些标记，我不得不使用这种原则，你在单独的行中编辑，添加每一项，所以它看起来有点像一个数据网格，但是我可以很好的控制一切，特别是一个显式的点来验证。
<StackPanel Grid.Row="1" Grid.IsSharedSizeScope="True"> ***** Top Grid is headers ************* <Grid> <Grid.Resources> <Style TargetType="TextBlock" BasedOn="{StaticResource textBlockStyle}"> <Setter Property="FontSize" Value="14"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="Foreground" Value="White"/> <Setter Property="Background" Value="DarkSlateGray"/> </Style> </Grid.Resources> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" SharedSizeGroup="A" /> <ColumnDefinition Width="Auto" SharedSizeGroup="B" MinWidth="220"/> <ColumnDefinition Width="Auto" SharedSizeGroup="C" MinWidth="120"/> <ColumnDefinition Width="Auto" SharedSizeGroup="D" MinWidth="120"/> <ColumnDefinition Width="Auto" SharedSizeGroup="E" MinWidth="120"/> <ColumnDefinition Width="Auto" SharedSizeGroup="F" MinWidth="120"/> <ColumnDefinition Width="Auto" SharedSizeGroup="G" MinWidth="120"/> </Grid.ColumnDefinitions> <TextBlock Text="NG" TextAlignment="Center" MinWidth="30" /> <TextBlock Text="Description" Grid.Column="1"/> <TextBlock Text="Per" Grid.Column="2"/> <TextBlock Text="Quantity" Grid.Column="3"/> <TextBlock Text="Nett" Grid.Column="4"/> <TextBlock Text="VAT" Grid.Column="5"/> <TextBlock Text="Gross" Grid.Column="6"/> </Grid> ********** Listbox for rows <ListBox ItemsSource="{Binding TransactionLines}" BorderThickness="0"> <ListBox.ItemContainerStyle> <Style TargetType="ListBoxItem"> <Setter Property="Padding" Value="0"/> </Style> </ListBox.ItemContainerStyle> <ListBox.ItemTemplate> <DataTemplate> <Grid Height="20"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" SharedSizeGroup="A"/> <ColumnDefinition Width="Auto" SharedSizeGroup="B"/> <ColumnDefinition Width="Auto" SharedSizeGroup="C"/> <ColumnDefinition Width="Auto" SharedSizeGroup="D"/> <ColumnDefinition Width="Auto" SharedSizeGroup="E"/> <ColumnDefinition Width="Auto" SharedSizeGroup="F"/> <ColumnDefinition Width="Auto" SharedSizeGroup="G"/> <ColumnDefinition Width="Auto" SharedSizeGroup="H"/> </Grid.ColumnDefinitions> <TextBlock Width="20" HorizontalAlignment="Center"> <TextBlock.Style> <Style TargetType="TextBlock"> <Setter Property="Text" Value="G"/> <Style.Triggers> <DataTrigger Binding="{Binding IsNettEntry}" Value="True"> <Setter Property="Text" Value="N"/> </DataTrigger> </Style.Triggers> </Style> </TextBlock.Style> </TextBlock> <TextBlock Text="{Binding Description}" Grid.Column="1"/> <TextBlock Text="{Binding NettPer, StringFormat='{}{0:C}'}" Grid.Column="2" Visibility="{Binding IsNettEntry, Converter={StaticResource BooleanToVisibility}}" Background="LightYellow" /> <TextBlock Text="{Binding GrossPer, StringFormat='{}{0:C}'}" Grid.Column="2" Visibility="{Binding IsNettEntry, Converter={conv:InvertBoolToVisibilityConverter}}" Background="#D6EAF8" /> <TextBlock Text="{Binding Quantity}" Grid.Column="3"/> <TextBlock Text="{Binding Nett, StringFormat='{}{0:C}'}" Grid.Column="4"/> <TextBlock Text="{Binding VAT, StringFormat='{}{0:C}'}" Grid.Column="5"/> <TextBlock Text="{Binding Gross, StringFormat='{}{0:C}'}" Grid.Column="6"/> <Button Grid.Column="7" Command="{Binding DataContext.RemoveLineCommand, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type UserControl}}}" CommandParameter="{Binding}" > <Path Data="{StaticResource Bin}" Fill="Gray" Stretch="Uniform"/> </Button> </Grid> </DataTemplate> </ListBox.ItemTemplate> </ListBox> ****** Another grid is used to enter a new line. <Grid DataContext="{Binding NewLine}"> <Grid.Resources> <Style TargetType="TextBlock" BasedOn="{StaticResource textBlockStyle}"> <Setter Property="Background" Value="#F2F3F4 "/> </Style> </Grid.Resources> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" SharedSizeGroup="A"/> <ColumnDefinition Width="Auto" SharedSizeGroup="B"/> <ColumnDefinition Width="Auto" SharedSizeGroup="C"/> <ColumnDefinition Width="Auto" SharedSizeGroup="D"/> <ColumnDefinition Width="Auto" SharedSizeGroup="E"/> <ColumnDefinition Width="Auto" SharedSizeGroup="F"/> <ColumnDefinition Width="Auto" SharedSizeGroup="G"/> <ColumnDefinition Width="Auto" SharedSizeGroup="H"/> </Grid.ColumnDefinitions> <ToggleButton IsChecked="{Binding IsNettEntry, Mode=TwoWay}" Grid.Column="0" PreviewMouseLeftButtonDown="ToggleButton_PreviewMouseLeftButtonDown" > <ToggleButton.Style> <Style TargetType="ToggleButton"> <Setter Property="Content" Value="G"/> <Style.Triggers> <Trigger Property="IsChecked" Value="True"> <Setter Property="Content" Value="N" /> </Trigger> </Style.Triggers> </Style> </ToggleButton.Style> </ToggleButton> <TextBox Text="{Binding Description}" Grid.Column="1" x:Name="DescriptionTextBox" /> <TextBox Text="{Binding NettPer, StringFormat='{}{0:C}'}" Grid.Column="2" Visibility="{Binding IsNettEntry, Converter={StaticResource BooleanToVisibility}}" Background="LightYellow" > <i:Interaction.Behaviors> <b:SelectAllTextBoxBehavior/> </i:Interaction.Behaviors> <i:Interaction.Triggers> <i:EventTrigger EventName="LostFocus"> <i:InvokeCommandAction Command="{Binding CalculatePerCommand}"/> </i:EventTrigger> </i:Interaction.Triggers> </TextBox> <TextBox Text="{Binding GrossPer, StringFormat='{}{0:C}'}" Grid.Column="2" Visibility="{Binding IsNettEntry, Converter={conv:InvertBoolToVisibilityConverter}}" Background="#D6EAF8" > <i:Interaction.Behaviors> <b:SelectAllTextBoxBehavior/> </i:Interaction.Behaviors> <i:Interaction.Triggers> <i:EventTrigger EventName="LostFocus"> <i:InvokeCommandAction Command="{Binding CalculatePerCommand}"/> </i:EventTrigger> </i:Interaction.Triggers> </TextBox> <TextBox Text="{Binding Quantity}" Grid.Column="3"> <i:Interaction.Behaviors> <b:SelectAllTextBoxBehavior/> </i:Interaction.Behaviors> <i:Interaction.Triggers> <i:EventTrigger EventName="LostFocus"> <i:InvokeCommandAction Command="{Binding CalculatePerCommand}"/> </i:EventTrigger> </i:Interaction.Triggers> </TextBox> <TextBlock Text="{Binding Nett, StringFormat='{}{0:C}'}" Grid.Column="4"/> <TextBlock Text="{Binding VAT, StringFormat='{}{0:C}'}" Grid.Column="5"/> <TextBlock Text="{Binding Gross, StringFormat='{}{0:C}'}" Grid.Column="6"/> <Button Grid.Column="7" Margin="6,2,2,2" Command="{Binding DataContext.AddLineCommand, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type UserControl}}}" PreviewKeyDown="Button_PreviewKeyDown" PreviewMouseLeftButtonDown="Button_PreviewMouseLeftButtonDown" > <TextBlock Text="Add"/> </Button> </Grid> </StackPanel>
1条答案
按热度按时间h5qlskok1#
我会在itemtemplate中使用一个带有网格和列的列表框。
使标题行成为一个单独的网格，并具有匹配的列。
如果列需要可变宽度，请使用Sharedsizegroup在标题中创建列。
然后，可以将边框放在一行中，并使用columnspan和cornerradius将其圆整。
稍后在xaml中声明的文本框将获得更高的z索引并显示在顶部。
如果你想要一个间隙，没问题，你可以有一个什么都没有的列。
这里有一些标记，我不得不使用这种原则，你在单独的行中编辑，添加每一项，所以它看起来有点像一个数据网格，但是我可以很好的控制一切，特别是一个显式的点来验证。