Basically I'm having two related problems:
1) The same problem as in this question How do I make an ItemsControl stretch to fill all availible space?, basically the ItemsControl doesn't fill in the whole space and the provided solution with DockedPanel doesn't work for me, because I need the items to stack vertically and not horizontally. Is there any other way to achieve this than using complex dynamic Grids?
2) There seems to be something off with the way DataGrid is presented when I'm using the method in this question WPF MVVM Multiple ContentControls in TabControl.
The headers are for some reason crushed to the side, also adding info to the table makes it look very bad. This wouldn't normally happen if I wasn't using this method of ItemsControl to display the table.
Code for TabControl:
<TabControl ItemsSource="{Binding Tabs}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header}"/>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding Content}"/>
</ScrollViewer>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
Code for DataGrid that is in the UserControl (view.xaml) which is bound to the above TabControl:
<DataGrid Grid.Row="0" Margin="10 10 10 0" ItemsSource="{Binding List}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTemplateColumn Header="ID">
<DataGridTemplateColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</DataGridTemplateColumn.HeaderStyle>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Label Content="{Binding Path=Id}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
//...
//Same for other columns
//...
</DataGrid>
Removing Header style does not help.
Remove the ScrollViewer element from your ContentTemplate. The DataGrid has its own ScrollViewer element built-in into its default ControlTemplate.
I actually found the answer and the accepted answer is correct (there's a workaround):
WPF ScrollViewer around DataGrid affects column width
As for my first question, I just sticked to UniformGrid and binded its row count to the ViewModel.
Related
I am using GridView to display a grid of variable-height items, except each cell is aligned to the middle of the row.
My markup is
<GridView ItemsSource="{x:Bind Bounties}" SelectionMode="None" HorizontalAlignment="Left"
VerticalAlignment="Top" >
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:Bounty">
<Grid>
<TextBlock Margin="12" MaxWidth="350" HorizontalAlignment="Left"
Text="{x:Bind ItemDefinition.DisplayProperties.Description}"
Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="WrapWholeWords" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
How can I get each cell to align to the top left of its row?
The internal content of the GridViewItem is vertically centered, this is the default style, if you want to modify it, please try this:
<GridView ...>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="VerticalContentAlignment" Value="Top" />
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemTemplate>
...
</GridView.ItemTemplate>
</GridView>
In addition, if you want to make the elements in the GridView adaptive height (the default is the height of the first element or the preset height as the height of all items), you can try StaggeredPanel in Windows Community Toolkit.
Thanks.
I have a TabControl which is bound to a List of UserControls (MyControls)
<TabControl Background="{x:Null}" x:Name="MyView" ItemsSource="{Binding MyControls}" >
I want to bind the header of each tab item to a property(Title) in each UserControl. Which I did as below
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Header" Value="{Binding Title}"/>
</Style>
</TabControl.ItemContainerStyle>
However since I override the ItemContainerStyle I lost all the default style for the application. My tab header looks different from other tab headers in the application
Is there any way to just bind to the Title without changing any style?
Define an ItemTemplate:
<TabControl Background="{x:Null}" x:Name="MyView" ItemsSource="{Binding MyControls}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
MyControls shouldn't return an IEnumerable<UserControl> though. It should return an IEnumerable<YourObject> where YourObject is a POCO class with a Title property along with any other properties. You should then use DataTemplates to define the appearance of a YourObject.
I have a TabControl that creates the TabItems from a ObservableCollection.
So in my ViewModel I already have a boolean Property IsMultiple and already gets set in code. So how do I hide the Tab header completely, but still display the content of that tab.
I have this:
<TabControl ItemsSource="{Binding myObservableCollection}"
ItemContainerStyle="{StaticResource myTabItemStyle}"
Style="{StaticResource myTabStyle}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding myTabHeaderTextProperty}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<DataTemplate>
</TabControl.ContentTemplate>
Basically I want to hide the itemtemplate, note that I cant just hide the TextBlock, because the style then still is there only with empty text. I want to remove/Hide the complete Tab header.
Set the Visibility property of the ItemContainerStyle to Collapsed:
<TabControl ItemsSource="{Binding myObservableCollection}">
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Visibility" Value="Collapsed" />
</Style>
</TabControl.ItemContainerStyle>
<TabControl.ContentTemplate>
<DataTemplate>
<TextBlock>content...</TextBlock>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
I am trying to figure out how to get rid of the padding below the text in a listview row:
And my markup for the Listview:
<ListView
ItemsSource ="{Binding AllowedApplicants}"
Height="250"
Width="219"
VerticalAlignment="Top"
Grid.Row="3"
Grid.Column="1"
Grid.ColumnSpan="2"
Margin="20,5"
BorderBrush="Bisque"
BorderThickness="2">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Padding="5,5" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I can't figure out where this extra padding (red arrow) is coming from. The properties for the row's padding and margins defaults to zero all around. I added the five to keep the text off the borders. The list view row seems to have a default Height which cannot be adjusted.
Try adding
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="MinHeight" Value="0"/>
</Style>
</ListView.ItemContainerStyle>
to your List View or use Live Property Explorer and Live Visual Tree Viewer from Visual Studio and peek into the ListViewItem.
I have ComboBox with custom ItemTemplate.
<ComboBox Height="20" Width="200"
SelectedItem="{Binding Path=SelectedDesign}"
ItemsSource="{Binding Path=Designs}" HorizontalAlignment="Left"
ScrollViewer.CanContentScroll="False">
<ComboBox.ItemTemplate>
<DataTemplate DataType="{x:Type formdesign:FormDesignContainer}">
<Rectangle Width="200" Height="100">
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding Path=ImageThumb}" Stretch="Uniform" />
</Rectangle.Fill>
</Rectangle>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
This works well. However WPF tries to draw rectangle as Combobox Text. How can I set "text" for this template. By "text" I mean string or control which represent selected item and write into combobox when item is selected
In other words I'd like to do this:
But now I got this
Try setting SelectionBoxItemTemplate with a TextBlock.
Appears that SelectionBoxItemTemplate is read-only. So another approach is to override ItemContainerStyle.Template. Example
I found this solution by Ray Burns a good approach. You can define two DataTemplate one for Items in the drop down list and the other for the selected item which should be shown in the Combobox. The using a trigger and checking the visual tree it decide which one to use.
<Window.Resources>
<DataTemplate x:Key="NormalItemTemplate" ...>
...
</DataTemplate>
<DataTemplate x:Key="SelectionBoxTemplate" ...>
...
</DataTemplate>
<DataTemplate x:Key="CombinedTemplate">
<ContentPresenter x:Name="Presenter"
Content="{Binding}"
ContentTemplate="{StaticResource NormalItemTemplate}" />
<DataTemplate.Triggers>
<DataTrigger
Binding="{Binding RelativeSource={RelativeSource FindAncestor,ComboBoxItem,1}}"
Value="{x:Null}">
<Setter TargetName="Presenter" Property="ContentTemplate"
Value="{StaticResource SelectionBoxTemplate}" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Window.Resources>
...
<ComboBox
ItemTemplate="{StaticResource CombinedTemplate}"
ItemsSource="..."/>
Add Textblock to the datatemplate and bind it
or add Contentpersenter on the rectangle
Edit:
it seems like i didn't got what you were tring to accomplish ,