I'm having a problem writing sensible logic when displaying a dynamic number of controls, which could range from any number from 1 to 9. So, if user input is 1, the control should attempt to fill the screen, if the user input is 2 the two controls should split the screen evenly, if the number is 3 one control would display on the top 50% of the screen while two controls should split the bottom 50% of the screen etc.
The solution I've come up with till now involves making a ton of grid rows and columns in the code behind that, depending on user input, assigns the controls to the right rows and columns. However, this solution feels like a hack and results in lots of unnecessary code. It's also not at all flexible if I want to expand the number of controls later.
I have a feeling there has to be an easier way to approach this problem, any suggestions?
You can extend Grid or a similar control and override it's layout behavior for your custom logic, while not having to re-invent the wheel.
For example, you can create a dynamic-grid control in following manner (it works with any number of children and automatically adjusts the number of rows and columns):
public class DynamicGrid : Grid
{
public static readonly DependencyProperty AdjustColumnWidthProperty =
DependencyProperty.RegisterAttached("AdjustColumnWidth",
typeof(double),
typeof(DynamicGrid),
new FrameworkPropertyMetadata(1.0, FrameworkPropertyMetadataOptions.AffectsArrange));
public static double GetAdjustColumnWidth(DependencyObject d)
{
return (double)d.GetValue(AdjustColumnWidthProperty);
}
public static void SetAdjustColumnWidth(DependencyObject d, double value)
{
d.SetValue(AdjustColumnWidthProperty, value);
}
private int getSquareLength(int items)
{
double result = Math.Sqrt(items);
return (int)Math.Ceiling(result);
}
private int getColumns(int length)
{
return length;
}
private int getRows(int length)
{
var count = _currentChildrenCount;
//assume we can have empty row
var rows = length - 1;
//if fits the bill - great!
if (rows * length >= count)
return rows;
else
return rows + 1;
}
private int _currentChildrenCount;
private void OnNumberOfItemsChangedImpl()
{
var numOfChildren = _currentChildrenCount;
using (var d = Dispatcher.DisableProcessing())
{
RowDefinitions.Clear();
ColumnDefinitions.Clear();
if (numOfChildren > 0)
{
var squareLength = getSquareLength(numOfChildren);
var numOfCols = getColumns(squareLength);
var numOfRows = getRows(squareLength);
for (var i = 0; i < numOfRows; i++)
RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
for (var i = 0; i < numOfCols; i++)
ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
var adjustWidthFactor = 1.0;
var adjustWidthOnLastRow = numOfChildren < (numOfCols * numOfRows);
if (adjustWidthOnLastRow)
{
var notEmptySlots = (numOfChildren % numOfCols);
adjustWidthFactor = ((double)numOfCols / (double)notEmptySlots);
}
int row = 0, col = 0;
foreach (var view in Children)
{
var cell = (FrameworkElement)view;
SetRow(cell, row);
SetColumn(cell, col);
if (adjustWidthOnLastRow && row == (numOfRows - 1))
SetAdjustColumnWidth(cell, adjustWidthFactor);
else
SetAdjustColumnWidth(cell, 1.0);
if (++col >= numOfCols)
{
col = 0;
row++;
}
}
}
}
}
protected override Size ArrangeOverride(Size arrangeSize)
{
var toReturn = base.ArrangeOverride(arrangeSize);
foreach (var view in Children)
{
var cell = (FrameworkElement)view;
var adjustWidthFactor = GetAdjustColumnWidth(cell);
var bounds = LayoutInformation.GetLayoutSlot(cell);
var newBounds = new Rect(
x: bounds.Width * adjustWidthFactor * GetColumn(cell),
y: bounds.Top,
width: bounds.Width * adjustWidthFactor,
height: bounds.Height
);
cell.Arrange(newBounds);
}
return toReturn;
}
public DynamicGrid()
{
_currentChildrenCount = 0;
LayoutUpdated += (s, e) => {
if (Children?.Count != _currentChildrenCount)
{
_currentChildrenCount = (Children != null) ? Children.Count : 0;
OnNumberOfItemsChangedImpl();
}
};
}
}
Sample usage 1: - Static collection
<local:DynamicGrid Margin="20">
<Button>one</Button>
<Button>two</Button>
<Button>three</Button>
<Button>four</Button>
<Button>five</Button>
<Button>six</Button>
<Button>seven</Button>
<Button>eight</Button>
</local:DynamicGrid>
Sample usage 2: - With ItemsControl
<ItemsControl Margin="20">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<local:DynamicGrid />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Background="Gray" Margin="5">
<TextBlock Text="{Binding}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsSource>
<col:ArrayList>
<sys:String>one</sys:String>
<sys:String>two</sys:String>
<sys:String>three</sys:String>
<sys:String>four</sys:String>
<sys:String>five</sys:String>
</col:ArrayList>
</ItemsControl.ItemsSource>
</ItemsControl>
Sample usage 3: - Dynamic collection
<Grid Margin="20">
<Grid.RowDefinitions>
<RowDefinition Height="4*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ItemsControl>
<ItemsControl.ItemsSource>
<Binding Path="Value" ElementName="slider">
<Binding.Converter>
<local:CountToCollectionConverter />
</Binding.Converter>
</Binding>
</ItemsControl.ItemsSource>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Background="Gray" Margin="5">
<TextBlock Text="{Binding}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<local:DynamicGrid />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<Slider x:Name="slider"
Grid.Row="1"
Minimum="1"
Maximum="12"
TickFrequency="1"
IsSnapToTickEnabled="True"
VerticalAlignment="Center" />
</Grid>
How it works
Whenever the children collection on the Grid is updated, it tries to find the nearest perfect square to the children-count. Once found, it calculates the number of columns and rows based on computed square-length; and defines the RowDefinitions, and ColumnDefinitions accordingly. If there is space left in last row, it adjusts the width of controls to fill the space.
Please note: As no specific rules have been specified in the question, I have customized this grid to just adjust the items in last row
You could use a StackPanel for each row and one for your "grid" like this
<StackPanel>
<StackPanel/>
<StackPanel/>
</StackPanel>
You could then add and fill your rows as required to match the layout for your given configuration - e.g. for 3 controls - 2 in row 1 and 1 in row 2, for 4 controls - 2 in row 1 and 2 in row 2, etc...
You could then bind the widths of the controls in each row to a property that was a function of how many controls there were in that particular row. For example, if there were 3 in a row each control would be 1/3 of the width. As long as you update this width property whenever you modify a row the control widths will be updated to fill your available space.
To add additional layouts you simply need to add new rules to your layout configuration.
Related
I want to be able to dynamically set a window's size in WPF, and then create as many columns and rows in a grid as I want.
I've created a method for it but it does not seem to work. I also added a border in XAML to see if there are columns and rows but I only see one square.
Also, it throws no error whatsoever.
This is my method:
public void CreateField(Grid MainGrid, TextBox Columns, TextBox Rows, TextBox WHeight, TextBox WWidth, MainWindow MainWindow)
{
int ColumnCount = Int32.Parse(Columns.Text);
int RowCount = Int32.Parse(Rows.Text);
int WindowHeight = Int32.Parse(WHeight.Text);
int WindowWidth = Int32.Parse(WWidth.Text);
MainWindow.MainWindow1.Height = WindowHeight;
MainWindow.MainWindow1.Width = WindowWidth;
for(int a = 0; a <= ColumnCount; a++){
ColumnDefinition c = new ColumnDefinition();
c.Width = new GridLength(WindowWidth / ColumnCount, GridUnitType.Pixel);
MainGrid.ColumnDefinitions.Add(c);
}
for (int a = 0; a <= RowCount; a++)
{
RowDefinition r = new RowDefinition();
r.Height = new GridLength(WindowHeight / RowCount, GridUnitType.Pixel);
MainGrid.RowDefinitions.Add(r);
}
}
In XAML I have this good with only 1 column and 1 row and a dockpanel for the textboxes and buttons.
<Border BorderBrush="Black" BorderThickness="2">
<Grid Name="MainWindowGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Name="DockPanel"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<DockPanel Background="LightSalmon" Grid.Row="0" Grid.Column="0" Grid.RowSpan="8">
<StackPanel>
<TextBox Name="txtColums" Text="16"/>
<TextBox Name="txtRows" Text="8"/>
<TextBox Name="txtWindowHeight" Text="800"/>
<TextBox Name="txtWindowWidth" Text="1600"/>
<Button x:Name="ButtonCreate" Content="Create" Click="ButtonCreate_Click"/>
</StackPanel>
</DockPanel>
<ContentControl Content="{Binding}"/>
</Grid>
</Border>
And according to the parameters written here the method should be executed on button click. But instead of a grid with 16 columns and 8 rows, I only get 1 column 1 row. (you can see the border at the edge)
So what am I doing wrong here? I have no real experience with grids whatsoever, and I am pretty clueless. Hope someone can help me out.
EDIT:
The suggestion of to activate MainGrid.ShowGridLines as said by ASh worked. Did not know about this functionality. As it turns out i do have succesfully created the columns and rows. I thought it not to work because i tried to paint a field in the grid with a color which did not work. Now i wonder, why this does not work as i thought this to be correct code.
var converter = new System.Windows.Media.BrushConverter();
var brush1 = (Brush)converter.ConvertFromString("#FFFFFFF0");
DockPanel myDockPanel = new DockPanel();
Grid.SetColumn(myDockPanel, 3);
Grid.SetRow(myDockPanel, 3);
myDockPanel.Background = brush1;
There was a lot going wrong here and its a magical jar of wonderment why you wanted to do this, however this should point you in a better direction
Some Modifications
Dedicated Grid
Get the ActualHeight and ActualWidth to use
Set GridLines true, so you can see whats happening
Set the Grid alignments to Stretch
Don't alter the size of the window
Xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="0"
Grid.Column="0"
BorderBrush="Black"
BorderThickness="2">
<DockPanel Grid.RowSpan="8" Background="LightSalmon">
<StackPanel>
<TextBox Name="txtColums" Text="16" />
<TextBox Name="txtRows" Text="8" />
<TextBox Name="txtWindowHeight" Text="800" />
<TextBox Name="txtWindowWidth" Text="1600" />
<Button x:Name="ButtonCreate"
Click="ButtonCreate_OnClick"
Content="Create" />
</StackPanel>
</DockPanel>
</Border>
<Grid Name="MainWindowGrid"
Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ShowGridLines="True" />
</Grid>
Code behind
public void CreateField(Grid MainGrid, TextBox Columns, TextBox Rows) // TextBox WHeight, TextBox WWidth, MainWindow MainWindow)
{
var ColumnCount = int.Parse(Columns.Text);
var RowCount = int.Parse(Rows.Text);
var width = MainGrid.ActualWidth;
var height = MainGrid.ActualHeight;
for (var a = 0; a <= ColumnCount; a++)
{
var c = new ColumnDefinition();
c.Width = new GridLength(width / ColumnCount, GridUnitType.Pixel);
MainGrid.ColumnDefinitions.Add(c);
}
for (var a = 0; a <= RowCount; a++)
{
var r = new RowDefinition();
r.Height = new GridLength(height / RowCount, GridUnitType.Pixel);
MainGrid.RowDefinitions.Add(r);
}
}
private void ButtonCreate_OnClick(object sender, RoutedEventArgs e)
{
CreateField(MainWindowGrid, txtColums, txtRows);
}
grid layout is correct. set MainGrid.ShowGridLines=true; to see it
to see dynamically created control you should add it to grid:
MainGrid.Children.Add(myDockPanel);
since grid rows have equal height and columns have equal width, the following lines can be safely removed:
r.Height = new GridLength(WindowHeight / RowCount, GridUnitType.Pixel);
c.Width = new GridLength(WindowWidth / ColumnCount, GridUnitType.Pixel);
if Width/Height is not set, it is defaulted to * which means Grid will size them equally.
as an alternative UniformGrid can be used:
AnotherMainGrid = new UnifromGrid {Rows = RowCount, Columns = ColumnCount };
but in this case child elements must be added consequtively
I have been looking for a resizeable Universal Windows App (RT, UWP) control for handling different screen sizes and scalable controls. What I am looking for is something like a wrapgrid (What I am using below), except that it changes the column width to fill the space when it is resized, like what occurs with the Tubecast app for windows, when you resize the window the columns will expand, or when shrinking, merge once they hit a minimum value.
Currently I am using a wrapgrid control to fill the TV shows into the library, adding a new frame in code, navigating it to a new instance of the LibraryModel Page, passing a class via the onNavigatedTo() method. This XAML page has a min properties of 135x200, and a max properties of 270x400, using static item height and with of 270x400 and visual state groups to change to 125x200 when the width goes below 720px. I tried using a variablesizedwrapgrid, but it wasn't any more helpful.
Is there a control like this that exists for UWP apps? Or will it need to be created manually using C#, or added to the platform later? This control is likely essential for future Windows 10 App development.
Example Screenshot
I suggest you look at view-boxes, might provide a solution.
I figured out a way to make the controls scale to screen sizes, so that they will take up all available real estate, and works well on all devices.
Others shown at bottom of page..
<Grid Background="#FF1D1D1D" x:Name="maingrid" SizeChanged="maingrid_SizeChanged">
<Grid Grid.ColumnSpan="2" Grid.RowSpan="2">
<ScrollViewer x:Name="LibraryScroll">
<Grid>
<Viewbox x:Name="LibraryItemViewbox" Stretch="Uniform" VerticalAlignment="Top" HorizontalAlignment="Left">
<Grid x:Name="Area" Width="{x:Bind maingrid.Width}" Height="{x:Bind maingrid.Height}">
<ItemsControl x:Name="showsPanel" Loaded="showsPanel_Loaded" ItemsSource="{x:Bind Library.LibraryItems, Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid x:Name="shows" Orientation="Horizontal" ItemHeight="400" ItemWidth="270" MaximumRowsOrColumns="3"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="viewmodel:LibraryItemModel">
<Button Padding="0" Foreground="Transparent" BorderThickness="0" Tapped="LibraryItem_Tapped" RightTapped="LibraryItem_RightTapped" Holding="Button_Holding"/>
<Grid x:Name="MainGrid" Background="#00A6A6A6" Width="270" Height="400">
<!-- Content -->
</Grid>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Viewbox>
</Grid>
</ScrollViewer>
</Grid>
</Grid>
This is the XAML structure required to scale the content.
The Viewbox is wrapped into a Grid, so that Vertical and Horizontal Alignment still works inside the ScrollViewer. The inner Grid "Area" has its Height and Width bound to the base Grid 'maingrid', so it maintains the aspect ratio of the page.
The Itemscontrol is defined as a WrapGrid, meaning that Item Width has to be defined, meaning this won't work variable sized controls inside (Although possible with some modification). The ItemTemplate is then defined as well (Requiring the Base Grid 'MainGrid' to be the same dimensions as the WrapGrid's ItemWidth and ItemHeight).
Events that are required are SizeChanged on the Base Grid and Loaded on the ItemsControl.
In order to scale the elements when the page is loaded, and scale them when the page is resized, the code looks like this:
private void showsPanel_Loaded(object sender, RoutedEventArgs e)
{
Area.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
Resize();
fillGaps(showsPanel.ItemsPanelRoot as WrapGrid);
}
private void Resize()
{
var width = this.ActualWidth;
var height = this.ActualHeight;
var grid = (WrapGrid)showsPanel.ItemsPanelRoot;
int numofColsOrig = grid.MaximumRowsOrColumns;
if (width >= 2800) grid.MaximumRowsOrColumns = 8;
if (width < 2800) grid.MaximumRowsOrColumns = 8;
if (width < 2400) grid.MaximumRowsOrColumns = 7;
if (width < 2000) grid.MaximumRowsOrColumns = 6;
if (width < 1600) grid.MaximumRowsOrColumns = 5;
if (width < 1200) grid.MaximumRowsOrColumns = 4;
if (width < 800) grid.MaximumRowsOrColumns = 3;
if (width < 400)
{
grid.MaximumRowsOrColumns = 2;
if (Library.LibraryItems.Count >= 2) Area.Padding = new Thickness(0);
}
if (numofColsOrig != grid.MaximumRowsOrColumns)
{
fillGaps(grid);
}
}
private void fillGaps(WrapGrid grid)
{
var libraryitems = Library.LibraryItems;
if (libraryitems.Count < grid.MaximumRowsOrColumns && libraryitems.Count != 0)
{
int numOfItemsToFill = grid.MaximumRowsOrColumns - libraryitems.Count;
Area.Padding = new Thickness { Right = (grid.ItemWidth * numOfItemsToFill) };
}
}
private void maingrid_SizeChanged(object sender, SizeChangedEventArgs e) { Resize(); }
The values of widths to change the number of rows will need to be manually tweaked in order to look better with different size objects, and when adding or removing from the ItemSource, Resize(); will have to be called to recalculate the dimensions of the elements, for it to look correct.
You will, of course, need to replace libraryitems with you own ObservableCollection, so that it can get the count of how many objects are in your list, or get the count from your WrapGrid's items count.
I am trying to dynamically add checkboxes to an uniformgrid in wpf.
But it looks like the grid doesn't allocate them enough space and so they all kinda lay over each other.
This is how I add them in code behind:
foreach (string folder in subfolders)
{
PathCheckBox chk = new PathCheckBox();
chk.Content = new DirectoryInfo(folder).Name;
chk.FullPath = folder;
chk.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
chk.VerticalAlignment = System.Windows.VerticalAlignment.Stretch;
unfiformGridSubfolders.Children.Add(chk);
}
This is how my XAML looks (I placed the uniformgrid in a scrollviewer)
<ScrollViewer Grid.Column="1" Grid.RowSpan="3">
<UniformGrid x:Name="unfiformGridSubfolders" Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</ScrollViewer>
And this is how it looks in the program:
I just want that every checkBox has enough space, so that the content can be fully read.
do you have to add UI elements dynamically? can't you just predefine your CheckBox template and add CheckBox.Content instead? If it's possible then define an ObservableCollection that contains your CheckBox.Contentlike this:
public ObservableCollection<string> SubfolderNames { get; set; }
then define an ItemsControl and bind it's ItemsSource to your collection:
<ItemsControl Grid.Row="0" x:Name="gridSubfolders" ItemsSource="{Binding SubfolderNames}" Grid.IsSharedSizeScope="True">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel></WrapPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="50" />
</Grid.ColumnDefinitions>
<Border Margin="5" BorderThickness="1" BorderBrush="Black">
<CheckBox Content="{Binding}"/>
</Border>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This way, All Items have the same width as they share a size group, moreover because they are sized Auto, they will also size to the largest CheckBox.Content.
I would suggest using something like WrapPanel
Then how can I do it, that each cell has the size of the checkBox with the biggest content?
Using a UniformGrid You would have to manually go through each checkbox, checking its size, and modifying the Uniform Grid.Columns to something like Math.Floor(Grid.CurrentWidth / CheckBoxMaxWidth)
When the Rows and the Columns property of a UniformGrid are both set to zero the UniformGrid tries to layout the elements in a square without regarding the size of the elements. I'd write a panel that layouts your elements as you want it like the following one. Just use MyPanel instead of UniformGrid in your XAML.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
namespace MyNamespace
{
class MyPanel : Panel
{
int columns;
int rows;
protected override Size MeasureOverride (Size constraint)
{
Size childConstraint = constraint;
double maxChildDesiredWidth = 0.0;
double maxChildDesiredHeight = 0.0;
if (InternalChildren.Count > 0)
{
for (int i = 0, count = InternalChildren.Count; i < count; ++i)
{
UIElement child = InternalChildren[i];
// Measure the child.
child.Measure (childConstraint);
Size childDesiredSize = child.DesiredSize;
if (maxChildDesiredWidth < childDesiredSize.Width)
{
maxChildDesiredWidth = childDesiredSize.Width;
}
if (maxChildDesiredHeight < childDesiredSize.Height)
{
maxChildDesiredHeight = childDesiredSize.Height;
}
}
columns = (int)(constraint.Width / maxChildDesiredWidth);
rows = (int)(InternalChildren.Count / columns + 0.5);
}
else
{
columns = 0;
rows = 0;
}
return new Size ((maxChildDesiredWidth * columns), (maxChildDesiredHeight * rows));
}
protected override Size ArrangeOverride (Size arrangeSize)
{
Rect childBounds = new Rect (0, 0, arrangeSize.Width / columns, arrangeSize.Height / rows);
double xStep = childBounds.Width;
double xBound = arrangeSize.Width - 1.0;
childBounds.X += 0;
foreach (UIElement child in InternalChildren)
{
child.Arrange (childBounds);
if (child.Visibility != Visibility.Collapsed)
{
childBounds.X += xStep;
if (childBounds.X >= xBound)
{
childBounds.Y += childBounds.Height;
childBounds.X = 0;
}
}
}
return arrangeSize;
}
}
}
I am working on Windows 8 application in C#/XAML.
I have a list of steps to show and the list can have one to many steps.
I have tried the GridView and ListView controls, but with those, it is not possible to have each element have its own height (because one step might have only one line of text, and the next one 3 lines, for example). The VariableSizedGridview does not help either.
What I am trying to achieve is something like the way cooking steps are shown in the Microsoft Bing Food & Drink app. So, steps are shown in rows in the first column, and when the end of the page is reached, it creates a second column, and so on. Like so :
Could anyone please help me find a way to achieve this?
What control to use and how?
It looks very simple, but I was not able to find any solution while searching online.
Thank you
Here is what I have done with the Gridview control (the Listview was quite similar) :
<Grid Name="gridSteps" Grid.Column="3" Margin="25,69,25,69">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="ÉTAPES" FontSize="22" FontWeight="Bold"></TextBlock>
<GridView Grid.Row="1" Name="gvGroupSteps" SelectionMode="None" IsHitTestVisible="False" VerticalAlignment="Top">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Width="400">
<TextBlock Text="{Binding Order}" Margin="0,15,0,0" FontSize="20" Foreground="Bisque"></TextBlock>
<TextBlock Text="{Binding Description}" Margin="0,5,0,0" FontSize="18" TextWrapping="Wrap"></TextBlock>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Background="#FFC9C9C9">
<TextBlock Text="{Binding GroupName}" FontSize="20" FontWeight="SemiBold"></TextBlock>
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</Grid>
You may want to post the XAML that you have tried. It sounds like to me that you need to nest your view items. Consider this very simple example:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<ListView>
<ListViewItem>Step 1</ListViewItem>
<ListViewItem>
<ListView>
<ListViewItem>Step 1a</ListViewItem>
<ListViewItem>Step 1b</ListViewItem>
<ListViewItem>Step 1c</ListViewItem>
</ListView>
</ListViewItem>
<ListViewItem>Step 2</ListViewItem>
</ListView>
</Grid>
I have tried the GridView and ListView controls, but with those, it is not possible to have each element have its own height
My recollection is that you can in fact have elements with different heights using those controls. These are both types of ItemsControl, which supports data templating, which in turn allows you to customize the appearance of each item, including its height.
That said, you may find that the simpler ListBox suits your needs in this case. It's hard to say without a code example or other details.
You should read MSDN's Data Templating Overview, which has a thorough discussion of the whole process, along with some good examples of what you can do. Pay particular attention to the section named "Choosing a DataTemplate Based on Properties of the Data Object". While a single template could still have variable height, clearly by using a different template according to your specific needs you can customize each item's style to your heart's content.
If this does not address your question, please provide a more detailed question. You should include a good, minimal, complete code example that shows clearly what you've tried, explaining precisely what that code does and how that's different from what you want it to do.
I have been looking all over the internet for a solution, but could not manage to find anything.
So i decided to do everything myself in C# code.
In short, in have a StackPanel with Orientation set to Horizontal, and I add a Grid to it and add rows to that Grid for every item i have. When the maximum height is reached (based on the screen Height), I add a new Grid to the StackPanel, and so on.
Here is my code if anyone needs it :
// Nombre de lignes maximal (16 lignes à 1080p)
int maxCharCount = (int)Window.Current.Bounds.Height * 16 / 1080;
spIngredients.Children.Clear();
foreach (var groupIngredient in db.Table<GroupIngredient>().Where(x => x.RecipeId == _currentRecipe.Id))
{
int linesCount = 0;
int row = 0;
var gGroup = new Grid();
spIngredients.Children.Add(gGroup);
gGroup.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
var groupName = new TextBlock() { Text = groupIngredient.Name, FontSize = 20, FontWeight = FontWeights.SemiBold, Margin = new Thickness(10) };
gGroup.Children.Add(groupName);
Grid.SetRow(groupName, row);
foreach (var ingredient in db.Table<Ingredient>().Where(x => x.GroupIngredientId == groupIngredient.Id))
{
// Nombre de lignes, split à 45 char
linesCount += 1 + ingredient.IngredientFull.Length / 45;
if (linesCount >= maxCharCount)
{
var gCol = new Grid();
spIngredients.Children.Add(gCol);
gCol.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
var col = new TextBlock() { Text = "", FontSize = 20, FontWeight = FontWeights.SemiBold, Margin = new Thickness(10) };
gCol.Children.Add(col);
gGroup = gCol;
row = 0;
linesCount = 0;
Grid.SetRow(col, row);
}
row++;
ingredient.Quantity = ingredient.Quantity * multiplier;
gGroup.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
var ingredientName = new TextBlock() { Text = ingredient.IngredientFull, Margin = new Thickness(10), FontSize = 18, TextWrapping = TextWrapping.Wrap, MaxWidth = 300 };
gGroup.Children.Add(ingredientName);
Grid.SetRow(ingredientName, row);
}
}
i am working on Windows 8 Phone Application.
I have issue where i am loading image with text on top of the images one by one.Its called coverflow feature.
I am getting Out of memory exception
for (int j = 0; j < items.Count; j++)
{
for (int i = 0; i < items.Collection.Count; i++)
{
Myobj obj = items[j].Collection[i];
if (obj.correct == 1)
{
coverflow.Add(new CoverFlow(items[j].Text, answer.TextTwo));
}
}
}
CarouselList.ItemsSource = coverflow;
DataTemplate :
<DataTemplate x:Key="DataTemplate1">
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Height="400" Width="400" CornerRadius="30,30,30,30">
<Border.Background>
<ImageBrush ImageSource="Images/sample.png" />
</Border.Background>
</Border>
<Grid Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Top">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="5,20,5,5"
Foreground="#000000"
Text="{Binding Title}"/>
</Grid>
<Grid Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Bottom">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="5,5,5,20"
Foreground="#000000"
Text="{Binding SubTitle}"/>
</Grid>
</Grid>
</DataTemplate>
Here the there are around 300+ items that displays one after the other:
Like this :
Its not working at all i tried to reduce the widht and height from 400 to 200 it works but i want the image size to 400 so that it looks good.
how can i avoid this Out Of Memory even if my images are 400*400
This is going to be really from the top of my head. Haven't dealt with this in a while.
1.Write yourself a function which will return you a bunch of items
public List<Item> GetFirstItems()
{
return items.Collection.Take(50);
}
public Item GetOtherItems(int skip)
{
return items.Collection.Skip(skip).Take(25)
}
2.Hook up to the SelectionChangedEvent for your control
//keep this somewhere so you know where you are in the list
var currentBatch = 0;
private void SelectionChanged(sender object, ChangedEventArgs e)
{
var position = e.CurrentItemIndex % 25;
if(position > currentBatch)
{
currentBatch = position;
var newItems = GetOtherItems(currentBatch * 25);
//take the global list of items and modify it;
//because we are moving right we only need the last 25 so we
//can skip the first 25
coverflow= coverflow.Skip(25);
//add your new items
coverflow.AddRange(newItems);
CarouselList.ItemsSource = coverflow; // you will have to clear the source first
}
else if(position < currentBatch)
{
currentBatch = position;
var newItems = GetOtherItems(currentBatch * 25);
//take the global list of items and modify it;
//because we are moving left we only need the first 25 so we
//can take the first 25
coverflow= coverflow.Take(25);
//add your new items
newItems.AddRange(coverflow);
coverflow = newItems;
CarouselList.ItemsSource = coverflow; // you will have to clear the source first
}
}
One more thing you will have to take care of is memorizing which was the current item and setting it again to be the current item.
This is all written from the top of my head and I have no idea if it work with your control but I hope it will at least help you a bit :)