I have a normal GridView, that displays grouped data. My goal is to move the header (a button) from the top of the group to the left of the group.
<GridView>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid>
<Button Content="{Binding Title}"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemWidth="240" ItemHeight="160" Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
<GridView.ItemTemplate>
<!-- item template -->
</GridView.ItemTemplate>
</GridView>
An answer to this question Grouping GridView in Windows 8 Metro App - while not completely the same desired layout - says that the desired layout is not possible without adding an extra "dummy tile".
I'm wondering if it is possible to achieve my goal - to move the header from the top of the group to the left of the group - without such an extra "dummy tile".
You need to edit the header container style. In Visual Studio, right-click the GridView and select
Edit Group Style -> Edit Generated Item Container (Container Style) -> Edit a Copy
You will see the Group Header, which is a Content Control, and the Group Items, which are an ItemsControl. Both are contained inside a grid that, in the default, is simple two rows. You can add a column, move the Group Header into Grid.Column=0 & Grid.Row=1 and you should be good to go.
Related
I'm using an ItemControl to display a list of strings (like a suggestion-list).
My problem is that it sometimes duplicates one entry..
I've tried to disable virtualization without success...
this is my xaml-code:
<ItemsControl ItemsSource="{Binding ResultList}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical" IsVirtualizing="False" IsContainerVirtualizable="False" VirtualizationMode="Standard"></VirtualizingStackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button>
<Button.Template>
<ControlTemplate TargetType="Button">
<TextBlock Text="{Binding DisplayName}"></TextBlock>
</ControlTemplate>
</Button.Template>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
as you can see there are 3 strings shown but I only have 2 in my binding-ResultList...(Ergebnisse 2 is bound to the ResultList.Count)
ResultList is of type ObservableCollection().
I finally found a solution for that problem.
These duplicate items are only shown when I put my listbox in a popup (to simulate a suggestion-field).
The only thing I had to do was adding this line of code after I changed the entries of ResultList to Refresh the list.
CollectionViewSource.GetDefaultView(field.ResultList).Refresh();
I'm looking for the exact solution used by the stock Photo app in Windows 10 to display a list of photos where the dimensions are different. Basically the height of the row are fixed but the width of each element is variable, determined by its relative dimension. A solution I used before was to use WrapPanel as the ItemsPanelTemplate. But using that means I lose the UI virtualisation for a very long list. There is certainly a solution used by Microsoft for the Photo app but I can't find it anywhere.
You can use WrapPanel from XAML Toolkit in your UWP application.
Or you can try to do it this way:
<GridView ItemsSource="{Binding}">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Width="100">
<Image Width="100" Height="50" Source="{Binding somesource}" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="8" Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
Or you can also use VariableSizedWrapGrid (it will let you to have images with different height)
I have a ListView, where the item template is another ListView, which has an item template of a TextBox. The end result of this is that I'm able to bind my collection of "rows" to the first ListView and I get a 2D grid of my data. I'm essentially trying to implement a basic spreadsheet.
My problem is that I want the TextBoxes to stretch horizontally so that they are all the same width and take up all of the available space.
I've removed all extraneous style, event handling, context menu, etc - here is the code as it is:
<ListView ItemsSource="{Binding Rows}">
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<ListView ItemsSource="{Binding Path=RowData}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Path=Value, Mode=TwoWay}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I've tried setting HorizontalContentAlignment="Stretch" on the ItemContainerStyle of the ListView, and HorizontalAlignment="Stretch" on the TextBox itself with no luck so far. I did have this "working" by binding the width of the TextBoxes to a dependency property on the control which was updated with an attempt to calculate the correct width for all boxes, but it was rather ugly and slow.
Does anyone know how I can get this done in the XAML alone?
Don't use StackPanel, use UniformGrid instead in your ItemsPanelTemplate and set its Columns to the number of your desired number of fields in each row.
<ItemsPanelTemplate>
<UniformGrid Columns="5"/>
</ItemsPanelTemplate>
Which will:
Provides a way to arrange content in a grid where all the cells in the grid have the same size.
I have problem with my gridview. I'm displaying grouped data in it and using VariableSizedWrapGrid for displaying items. The problem is that every group has the same width equal to the most item. Even if a group contains only 1 item it has width like it was 20 items there. How to make these ItemsPanels have variable width?
My issue is almost the same as described here but when I use VirtualizingStackPanel as GridView.ItemsPanel my VariableSizedWrapGrid is displayed in one row and I need it to be displayed in two rows.
<SemanticZoom.ZoomedInView>
<GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False"
ScrollViewer.IsVerticalScrollChainingEnabled="False"
ItemTemplate="{StaticResource PatientMediaFileBigItemTemplate}"
ItemsSource="{Binding Source={StaticResource PatientVisits} }"
IsItemClickEnabled="True"
SelectionMode="None"
Margin="0,0,0,0" ItemClick="MediaFileIcon_Click"
>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Button Content="{Binding DateOfVisit, Converter={StaticResource StringFormatConverter}, ConverterParameter='{}{0:dd MMM yyyy}'}" FontSize="28" Foreground="Black" BorderThickness="0" Click="ButtonVisit_OnClick"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0" Width="Auto" Background="BlueViolet"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
You might need to change the ItemsPanel of your GridView to a StackPanel, but note this will limit the number of items you can put in your GridView as it disables virtualization. A better option might be to keep showing a limited number of items in a group, but add a button (really the group header button with a chevron glyph should work) to navigate to a full view of the selected group.
Im a beginner in WPF programming, coming from .NET 2.0 C#.
Im trying to make a horizontal StackPanel which should be filled with data from a table in a database. The problem is that I want it to display an image with some text from the table below and then stack those two items horizontally.
Here's some pseudo-code to display what I want to do:
<StackPanel Orientation="horizontal" ItemsSource="{Binding Path=myTable}">
<StackPanel>
<Image Source="User.png"/>
<Label HorizontalAlignment="Center" Content="{Binding Path=UserName}"></Label>
</StackPanel>
</StackPanel>
I simply cannot figure oout how to do this.
Julien's answer is correct for your written description, however, looking at your XAML, it appears you are looking for something like the following:
<DataTemplate x:Key="UserDataTemplate">
<StackPanel>
<Image Source="User.png"/>
<Label HorizontalAlignment="Center" Content="{Binding Path=UserName}" />
</StackPanel>
</DataTemplate>
<ItemsControl x:Name="UserList" ItemTemplate="{StaticResource UserDataTemplate}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
You definately need an ItemsControl (or some derivation of) to bind your source to. Then you can change the the orientation by setting it's items panel (which I believe is a VirtualizingStackPanel with Vertical orientation by default) so just set it to a VirtualizingStackPanel with Horizontal Orientation. Then you can set the ItemsTemplate for each of your items to the layout you desire (an image stacked on top of text bound from your database).
Basically, you want to use a control capable of displaying an enumeration of objects. The control capable of this is the class ItemsControl and all of its descendants (Selector, ListBox, ListView, etc).
Bind the ItemsSource property of this control to a list of objects you want, here a list of users you've fetched from the database. Set the ItemTemplate of the control to a DataTemplate that will be used to display each item in the list.
Sample code:
In a Resources section (for example Window.Resources):
<DataTemplate x:Key="UserDataTemplate">
<StackPanel Orientation="Horizontal">
<Image Source="User.png"/>
<Label HorizontalAlignment="Center" Content="{Binding Path=UserName}" />
</StackPanel>
</DataTemplate>
In your Window/Page/UserControl:
<ItemsControl x:Name="UserList" ItemTemplate="{StaticResource UserDataTemplate}" />
In your code behind:
UserList.ItemsSource = ... // here, an enumeration of your Users, fetched from your db