I have a horizontal ListView which I would like to ensure that there is some padding between the items (in my case I have Grid inside of the item template), but I don't want there to be any extra padding for the last grid
I want there to be padding where the red line is.
EDIT
H.B.'s suggestion was really helpful, here is the style that I added to get a 5px margin between grids...
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="5 0 0 0" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter Property="Margin" Value="0" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
You can set a Padding in the ItemContainerStyle of the ListView. You can use a DataTrigger on RelativeSource PreviousData being null to make it conditional.
Alternatively you could create a new Panel which has a concept of spacing.
Related
I'm using a HeaderedItemsControl. Each item is a 3 column Grid with a Border and TextBlock in each column. I would like the background color of the Borders in each item to alternate. (Basic alternating row background effect.) I have attempted to create a style at the UserControl level for the Grid that applies a background color to all borders within it, based on the AlternationIndex of the containing control:
<Style TargetType="Grid" x:Key="myItemsGrid">
<Style.Resources>
<Style TargetType="Border">
<Setter Property="Background" Value="Azure" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=AlternationIndex, RelativeSource={RelativeSource AncestorType=ItemsControl}}" Value="2">
<Setter Property="Background" Value="{StaticResource color_LogoLight}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>
The Setter bit is working, as the borders are all "Azure". But how do I properly reference the AlternationIndex so that the border background color changes for every other row. I tried pointing the RelativeSource to HeaderedItemsControl and ItemsControl, but neither seems to be the proper target. I have browsed the live visual tree, but I can't find anything to reference, there.
Any help is appreciated.
You have to look for AlternationIndex on the Item of ItemsControl, not on ItemsControl itself! But which type you have to search in binding for? For example in ListBox it's a ListBoxItem and in ItemsControl it's a ContentPresenter.
Don't forget Path=(ItemsControl.AlternationIndex) and for your case (AlternationIndex==2) you have to set AlternationCount in ItemsControl at least to 3! So this code should work:
<DataTrigger Binding="{Binding Path=(ItemsControl.AlternationIndex), RelativeSource={RelativeSource AncestorType=ContentPresenter}}" Value="2">
<Setter Property="Background" Value="{StaticResource color_LogoLight}" />
</DataTrigger>
i have a DataGrid, i want to add each row of this DataGrid, one by one, then check the information in that Row, if something in it (lets call it cancel) is true, that row is colored black, otherwise its colored white.
i'd also want to know how the contents in that row can be modified, like set text of each cell in it, and then add it to the DataGrid.
To fill and modify a DataGrid you bind an ObservableCollection to the DataGrid's ItemSource Property.
You can then modify the Collection as you like. For the layout you can use a Style.
<DataGrid ItemsSource="{Binding Collection}">
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridRow}">
<Style.Triggers>
<DataTrigger Binding="{Binding Cancel}" Value="false">
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground" Value="White"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
<!--
...
-->
</DataGrid>
I have DataGrid.IsReadonly bound to a property that changes based on a condition. The DataGrid contains a DataGridCheckBox column that I had to style in order to center it vertically in a cell.
However, after applying a style the check box column does not respect the parent's IsReadonly value. That is, regardless of its value the checkbox can be clicked on and changed. I've seen quite a number of posts dealing with somewhat similar situations but could not find a reliable solution.
Could someone please let me know how to style the checkbox column so it respects its parent griddata's IsReadonly? Any theory behind it would also be appreciated.
This how I apply the style:
<Style x:Key="CenterStyleCB" TargetType="{x:Type CheckBox}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<DataGridCheckBoxColumn ... ElementStyle="{StaticResource CenterStyleCB}" />
Add the following code into your style:
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Column.IsReadOnly, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGridCell}}}" Value="True">
<Setter Property="IsHitTestVisible" Value="False" />
</DataTrigger>
</Style.Triggers>
If your DataGrid is always ReadOnly, then I would suggest you skip the trigger and use the setter directly.
So the following does the first part:
<Expander>
<Expander.Style>
<Style TargetType="Expander">
<Setter Property="IsExpanded" Value="False" />
<Setter Property="Header" Value="See More" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsExpanded,RelativeSource={RelativeSource Self}}" Value="True">
<Setter Property="Header" Value="See Less" />
</DataTrigger>
</Style.Triggers>
</Style>
</Expander.Style>
</Expander>
But what if I want the header size to be 16pt too? Can't think of the correct syntax.
There is no direct way of modifying header. You need to create custom template to change property of header only.
But there is a easy workaround which I used. You can change the font size in the trigger for the full expander like <Setter Property="FontSize" Value="16"/>. And have the fontsize of children explicitly set to 12(or the default value) or also can bind the children fontsize to the expander's parent fontsize. This will make expander children to remain as 12 or to expander's parent fontsize and trigger will not have any affect on them, so only header will be changing.
I want to make the data record's VerticalAlignment=Center in DataGrid. By default,the data record's VerticalAlignment=Top, It looks uglily. Can you provide me this style?
I define my style in App.xaml file. The following is my current DataGrid style:
<Style x:Key="DataGridView" TargetType="DataGrid">
<Setter Property="AlternatingRowBackground" Value="AliceBlue"></Setter>
<Setter Property="AlternationCount" Value="1"></Setter>
<Setter Property="AutoGenerateColumns" Value="False"></Setter>
<Setter Property="GridLinesVisibility" Value="Horizontal"></Setter>
<Setter Property="VerticalGridLinesBrush" Value="DarkGray"></Setter>
<Setter Property="HorizontalGridLinesBrush" Value="DarkGray"></Setter>
<Setter Property="RowHeight" Value="32"></Setter>
</Style>
Try setting VerticalContentAlignment="Center" on the DataGrid:
<DataGrid VerticalContentAlignment="Center">
...
</DataGrid>
or you can add a setter to your style:
<Setter Property="VerticalContentAlignment" Value="Center"/>
When applied to ItemsControls, this property usually modifies alignment of each individual item container. In your case, this should make all rows align their contents to center.
UPDATE
Seems like the WPF built-in DataGrid doesn't follow the rule.
The solution depends on the type of the columns you use.
For DataGridTemplateColumn use a CellTemplate like this:
<DataTemplate>
<!--Substitute the TextBlock by the actual cell content, but don't drop VerticalAlignment-->
<TextBlock VerticalAlignment="Center" Text="{Binding Text}"/>
</DataTemplate>
For DataGridTextColumn, set ElementStyle:
<Style>
<Setter Property="FrameworkElement.VerticalAlignment" Value="Center"/>
</Style>
I've tried this on DataGridTextColumn, but the property is from its parent DataGridBoundColumn, so should work for DataGridCheckBoxColumn and DataGridHyperlinkColumn also.
Update 2
BTW, there's another solution.