I want to Change the Height of the ItemContainer and not the Heightof the Item itself the Container is in a ListView
What I want to Change:
To Something like this:
The structur of the Code Looks like this:
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding A}" Grid.Column="0"/>
<TextBlock Text="{Binding B}" Grid.Column="1"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Hope for some help
You need to change the MinHeight of all ListViewItem elements that appear in your ListView. You can achieve this by using a Style.
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="MinHeight" Value="0"/>
<Setter Property="Padding" Value="6,3"/>
</Style>
</ListView.ItemContainerStyle>
<TextBlock Text="Hello"/>
<TextBlock Text="World"/>
</ListView>
Using Padding with this method is also a good idea as you do not want each list view item to be too thin.
Related
I have a list of items in a WPF DataGrid. In group mode I want do highlight the color of the group header and for Drag-Drop the header should be selectable.
I think, I have to make a usercontrol depending on Expander, because the Expander himself has no IsSelected flag.
For the beginning I tried to change the color of the Expander header, but I only could do that for a StackPanel containing the text for the group property and the items count.
I changed the StackPanel to a Grid so the grouping property and the item count are better formated.
The IsMouseDirectlyOverChanged Event is not fired.
<DataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0,0,0,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander Background="#1E90FF" BorderBrush="Gray" Foreground="Black" BorderThickness="0 0 0 3" IsMouseDirectlyOverChanged="Expander_IsMouseDirectlyOverChanged">
<Expander.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" FontWeight="Bold" Text="{Binding Path=Name}" Margin="5,0,0,0"/>
<TextBlock Grid.Column="1" FontWeight="Bold" Text="{Binding Path=ItemCount}"/>
</Grid>
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
Any idea how to manage that?
I didn't get it to work with XAML, but with code-behind with Expander MouseEnter & MouseLeave.
Not very elegant, but it works.
I have started learning the WPF. I am facing the problem regarding hover effect on the list box.
I have used the list box control. Inside that control, I have added toggle button and On toggle button click I have bound the other list box.
Say,
Listbox -> Toggle button -> Listbox
I would like to remove parent (Name) list box item boarder hover effect when I hover over the title.
I have searched a lot but didn't found any hits how can remove parent hover effect from child element.
Here is the code that I have used for that.
<StackPanel.Resources>
<converters:BooleanToHiddenVisibility x:Key="boolToVis"/>
</StackPanel.Resources>
<ListBox ItemsSource="{Binding Items}" ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemContainerStyle="{StaticResource NullSelectionStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<VirtualizingStackPanel>
<ToggleButton Name="checkViewTextBox" >
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<TextBlock Name="Text" Text="{Binding Title}" HorizontalAlignment="Center" MinWidth="30"/>
</Grid>
<Grid Grid.Row="0" Grid.Column="1">
<Image Source="C:\Work\Temp_Olotech\ToggleButton\ToggleButton\Tick_Mark_Dark-512.png" Height="20" Width="20"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<ListBox ItemsSource="{Binding InnerItem}" Visibility="{Binding Path=IsChecked, ElementName=checkViewTextBox,
Converter={StaticResource boolToVis}}" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="200">
<ListBox.ItemTemplate>
<DataTemplate>
<VirtualizingStackPanel CanVerticallyScroll="True">
<Expander Header="Title">
<VirtualizingStackPanel>
<TextBlock Text="{Binding Name}"></TextBlock>
</VirtualizingStackPanel>
</Expander>
</VirtualizingStackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</VirtualizingStackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBox Text="only seen when above checkbox is checked"
Visibility="{Binding Path=IsChecked, ElementName=checkViewTextBox, Converter={StaticResource boolToVis}}"/>
</StackPanel>
</Grid>
Thank you for the help!
I have created a listview with databinding and a "Itemstemplate" which takes a "Datatemplate" where I have a Stackpannel but the style doesn't apply to the stackpannel, there is no space between the textblocks in the stackpannel:
<ListView Grid.Row="1" DataContext="{Binding Source={StaticResource ViewModel}}" ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Background="Gray" >
<StackPanel.Resources>
<Style TargetType="TextBlock" x:Key="margintextblock">
<Setter Property="Margin" Value="10,0,0,0"/>
</Style>
</StackPanel.Resources>
<TextBlock Style="{StaticResource listviewtextblock}" Text="{Binding Path=Firstname}" Foreground="Gold"></TextBlock>
<TextBlock Style="{StaticResource listviewtextblock}" Text="{Binding Path=Lastname}" Foreground="Black"></TextBlock>
<TextBlock Style="{StaticResource listviewtextblock}" Text="{Binding Path=Id}" Foreground="OrangeRed"></TextBlock>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
So what's wrong?
You have to remove x:Key="margintextblock" because of this the style doesn't apply automatically to the TextBlocks
By setting the x:Key property on a style, you are telling WPF that you only want to use this style when you explicitly reference it on a specific control.
Take a look on this tutorial
EDITED
And you also have another problem - you are setting style for you TextBlocks Style="{StaticResource listviewtextblock}"
In this case what you have to do is inherit StackPanel TextBlock style from listviewtextblock style
<StackPanel.Resources>
<Style TargetType="TextBlock" BasedOn="{StaticResource listviewtextblock}">
<Setter Property="Margin" Value="10,0,0,0"/>
</Style>
</StackPanel.Resources>
And remove style Style="{StaticResource listviewtextblock}" from TextBlocks
you code should looks like this
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Background="Gray" >
<StackPanel.Resources>
<Style TargetType="TextBlock" BasedOn="{StaticResource listviewtextblock}" >
<Setter Property="Margin" Value="10,0,0,0"/>
</Style>
</StackPanel.Resources>
<TextBlock Text="{Binding Path=Firstname}" Foreground="Gold"></TextBlock>
<TextBlock Text="{Binding Path=Lastname}" Foreground="Black"></TextBlock>
<TextBlock Text="{Binding Path=Id}" Foreground="OrangeRed"></TextBlock>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
I'd like to have grid width same as listview width, right now it looks like:
But what i want to reach is:
Code:
<DataTemplate x:Key="Shared">
<ListView Name="_lv" ItemsSource="{Binding lista}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="{Binding name}"/>
<Grid Grid.Column="1">
<WrapPanel Orientation="Horizontal">
<telerik:RadNumericUpDown Name="minRNUD" Value="0" />
<Button Width="40" Height="40" Style="{StaticResource MButton}" Margin="0" Padding="1">
<Button.Content>
<Image Source="/myProject;component/Pictures/clr.png" Width="30" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Button.Content>
</Button>
</WrapPanel>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
Any ideas?
Thanks!
HorizontalContentAlignment property determines the horizontal alignment of the content
setting HorizontalContentAlignment on the list items may affect it's content not the item itself
however setting the same on the parent items control like ListBox, ListView etc. will affect the alignment of their content or can say the items
so simply moving the HorizontalContentAlignment property to the parent ItemsControl (ListBox, ListView etc). will ensure the desired alignment of the items.
so simply add the property HorizontalContentAlignment="Stretch" to the parent items control of the desired item.
I'd like to wrap text contained in three TextBlocks inside a StackPanel without writing TextWrapping="Wrap" for each TextBlock (sometimes there may be more of those):
<ListBox ItemsSource="{Binding Places}" SelectedItem="{Binding SelectedPlace, Mode=TwoWay}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Name, Mode=OneWay}" TextWrapping="Wrap" />
<TextBlock Text="{Binding Path=Distance, Mode=OneWay}" TextWrapping="Wrap" />
<TextBlock Text="{Binding Path=Description, Mode=OneWay}" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So if I dynamically add another TextBlock it should wrap automatically (I don't want to do it inside my code-behind file)
In other words - I'd like to write style that would be automatically applied. In CSS it would be something like that:
listbox textblock {
word-wrap:break-word;
}
UPDATE
This contains my ListBox:
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Grid.Column="0" Margin="12,0,12,0">
<views:ListItem Margin="12,6,0,0" />
</Grid>
</Grid>
Did you try adding a style for TextBlock? I.e.
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<StackPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
</StackPanel.Resources>
...
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Unless you specify a Width constraint for the TextBlock, it will not wrap its text content. As the StackPanel does not resize its contents, it will never pass any Width constraints to the TextBlocks inside and so they will never wrap. Setting the TextWrapping property to Wrap is not enough to make the text content wrap, so applying a Style with this property set will not do what you want.