We Keep Coding

WPF ListView items to be displayed with individual height

I'm currently trying to display a Dictionary (which is held in a Dictionary itself).
I started at first using a UniformGrid as ItemsPanelTemplate, but realized pretty fast, the items to display can have individual heights.
I've got so far, that I can display all content using the UniformGrid, but can't seem to get it working using a Grid or StackPanel as ItemsPanelTemplate.
The code below is working fine with the downside that each Operation-block is given the same height though their height can be variable.
After given some thought I came to the conclusion that a StackPanel would be best to use, as the Operations would be shown bleow each other taking the height they needed. But when I tried, I relaized they take only a fraction of the ListView's height.
Worth to mention:
The Operation-UserControl in itself does evaluate its height and build its layout accordingly. So it doesn't take the space needed to display all content, but displays the content which does fit in the available space.
So how can I achieve that the ListViewItems (=operations) take the ListView's full height?
EDIT: clarification
if the described behaviour isn't possible with any above mentioned control, but any other could provide the needed funtionality, let me know...
EDIT2: some examples
Total available space: 500
No Scrollbar.
Sidenote: there is no maxItemLimit, but it's highly unlikely that the ItemCount would exceed 10.
Given 1 item: (needed space to display all content 300)
This single item would take 300.
Given 2 items: (these would need 150 and 200 of space)
Both items would be displayed in there full size: 150, 200.
(Presumably only working with a StackPanel.)
Given 10 items:
Those 10 would be squeezed equally or relative to full-desired size in the 500 (so 50 per item).
Both behaviours would be fine.
UniformGrid vs StackPanel
<UserControl x:Name="vDay" x:Class="RefServiceClient.Day"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:RefServiceClient"
mc:Ignorable="d"
d:DesignHeight="60" d:DesignWidth="120"
MinHeight="40">
<Grid x:Name="gridDay"
Width="{Binding ActualWidth, ElementName=vDay, Mode=OneWay}"
Height="{Binding ActualHeight, ElementName=vDay, Mode=OneWay}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="DayHeader" Grid.Row="0">
<!--containing header info: several textboxes, which are irrelevant for the question-->
<TextBox x:Name="dayShortname"
Grid.Row="0" Grid.Column="1"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
Margin="1"
Text="{Binding Path=Value.DayShortname}"/>
</Grid>
<ListView x:Name="operations" Grid.Row="1" Background="Aqua"
ItemsSource="{Binding Path=Value.OperationList}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<local:Operation Background="Crimson" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch"/>
<!--<local:Operation Background="Crimson" />-->
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<!--<Grid Grid.IsSharedSizeScope="True"/>-->
<!--<StackPanel/>-->
<!--<VirtualizingStackPanel Orientation="Vertical"/>-->
<UniformGrid Columns="1"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>

You could create a custom panel that arranges your item according to your rules. Then you just have to design your items in a way that they display nicely for whatever size they are allowed to take.
A rough sketch of the panel could look as follows:
public class SqueezeStackPanel : Panel
{
protected override Size MeasureOverride(Size availableSize)
{
var desiredHeight = 0.0;
foreach (UIElement child in InternalChildren)
{
child.Measure(availableSize);
desiredHeight += child.DesiredSize.Height;
}
if (availableSize.Height < desiredHeight)
{
// we will never go out of bounds
return availableSize;
}
return new Size(availableSize.Width, desiredHeight);
}
protected override Size ArrangeOverride(Size finalSize)
{
// measure desired heights of children in case of unconstrained height
var size = MeasureOverride(new Size(finalSize.Width, double.PositiveInfinity));
var startHeight = 0.0;
var squeezeFactor = 1.0;
// adjust the desired item height to the available height
if (finalSize.Height < size.Height)
{
squeezeFactor = finalSize.Height / size.Height;
}
foreach (UIElement child in InternalChildren)
{
var allowedHeight = child.DesiredSize.Height * squeezeFactor;
var area = new Rect(new Point(0, startHeight), new Size(finalSize.Width, allowedHeight));
child.Arrange(area);
startHeight += allowedHeight;
}
return new Size(finalSize.Width, startHeight);
}
}
This panel can be used in the ItemsPanelTemplate of your ListView with disabled scrollbars.

It depends. I'll give you an options. First. Implement, let say, Boolean AttachedProperty, marking whether this particular instance should be of certain size. In case 0/1 is not sufficient, declare appropriate enumeration. Second. Extend existing StackPanel, override appropriate protected members. At least, MeasureOverride/ArrangeOverride. There you can read the value of corresponding attached property and decide how big or small it has to be. Does it sound like a solution? In case it does, I can provide some examples.

C# XAML Using Converter to set the Height

I have created a converter called AspectRatioConverter which I want to use to set the Height of my MediaElement, but the converter is called only once at the start of the program and no longer during the program.
Height="{Binding ElementName=MediaElement, Path=ActualWidth,
Converter={StaticResource AspectRatioConverter}}"
The height of the MediaElement must change because I load different videos in it of different heights (the converter find the best height for the MediaElement taking in consideration the natural height and width of the video and the width of the MediaElement that is calculated using the width of the page.
So, how can I do this ? How can I modify the Height of the control during the program (using converters) ?
Problem solved :
Height="{Binding ElementName=MediaElement, Path=CurrentState, Converter={StaticResource AspectRatioConverter}}"

WPF controls and margin proportional to the window size

Currently when I making the UI, I set all the margin and size of the control to a fixed size according to the screen size. Is there some way adjust the size or margin dynamically proportionally to the screen size so there's no need to set the property in the XAML every time.
My current knowledge tells me that I could set the fixed width & height in style or template or in every layout which was used.

I would say re-think your approach. Instead of absolutely positioning your elements using margins, use the correct panel so elements correctly re-position and stretch themselves depending on the size of the container.
There are many panels in WPF supporting different layouts for automatically laying out your elements dynamically, e.g. StackPanel for stacking, WrapPanel for wrapping, see the overview of panels here: http://msdn.microsoft.com/en-us/library/ms754152(v=vs.110).aspx
e.g.
instead of:
<Grid>
<Label Content="Name:" Margin="92,320,0,0"/>
<TextBox Text="enter your name..." Margin="124,320,0,0"/>
</Grid>
use:
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Content="Name:" Grid.Column="0"/>
<TextBox Text="enter your name..." Grid.Column="1"/>
</Grid>
Then use Margin for giving the element space, not position, e.g. a margin of 5.

Not sure if this is what you are looking for. But I what I do is set the size of my master window to be 80% of the client monitor size.
public void SetPage(Page currentPage)
{
currentPage.Tag = this; //Set the new page's Tag to 'this' so we can reference it from within.
_mainFrame.Navigate(currentPage);
double height = System.Windows.SystemParameters.PrimaryScreenHeight;
double width = System.Windows.SystemParameters.PrimaryScreenWidth;
//set the size of the window to 80% of the client monitor
this.Height = (80.0 / 100.0) * height;
this.Width = (80.0 / 100.0) * width;
WindowStartupLocation = System.Windows.WindowStartupLocation.CenterScreen;
}

Stretch image to fill available width / height (separately)

Is it any way to fill available width / height with image in xaml?
I need something like UniformToFill, but where I can control stretch direction (width or height)
Assume I have have following code:
<UniformGrid Columns="2" Rows="2">
<Image Source="Desert1.jpg" Stretch="Uniform"/> //
<Image Source="Desert2.jpg" Stretch="UniformToFill"/> //
<Image Source="Desert3.jpg" />
<Image Source="Desert4.jpg" />
</UniformGrid>
EDIT:
for examle (width): if image is half as wide as I want to show, I don't care about height and just scale x2 image height and width. So image must fit width, and don't care about height. It's desired behaviour, but if it's not possible - ok. So you can rethink question as IF it possible, HOW can I do it in xaml.
Also all images may have different width and height

I think that you might be able to get the effect you desire in certain conditions. If your images are all bigger than the size that they will be displayed, you could possibly use this:
<Image Source="Desert.jpg" Stretch="UniformToFill" StretchDirection="DownOnly" />
A ViewBox has the same Stretch properties as an Image and there is a good example of the differences between the different combinations in the How to: Apply Stretch Properties to the Contents of a Viewbox article on MSDN.

This might be what you are looking for...
TransformedBitmap
Here is a static method I made in an ImageUtility class.
public static TransformedBitmap GetScaledBitmapImageSprite(BitmapSource src, double x_scale, double y_scale)
{
return (new TransformedBitmap(src, new ScaleTransform(x_scale, y_scale)));
{
The x_scale and y_scale are doubles in the form of:
desired_width / original_width
Maybe a little different than what you are looking for but I think it can get you started on the right track.
You can store your TransformedBitmap in memory and apply new transforms through:
TransformedBitmap x = new TransformedBitmap();
x.Transform = new ScaleTransform(x,y);

You should use
<Image Source="{Binding Image}" Stretch="Fill"/>
like if you use Stretch="UnifrmtoFill" then it will change both length and width in a ratio or I say both together.
so if you use
Stretch="Fill", it gives you chance to change either height or width at a time whatever is changed.

How to resize WPF DataGrid to fit its content?

The aim
I would like to set such size for the DataGrid (standard, from WPF) so all cells (text) would be fully visible. I have window with DockPanel, with DataGrid in it, so when I resize the window, all nested widgets (DockPanel and DataGrid) are resized accordingly.
Example (edit-1)
Let's say you have window, 100 pixels wide and you have DataGrid with one column, which cell is "the quick brown fox..." (400 pixels wide). Thus the DataGrid should be resized to 400 pixels (probably more, because of padding) and the Window should be resized to 400 pixels too (also more, because of padding).
I didn't find any standard method to do it (AFAIK WPF provides way to clip the content to desired width, my problem is exactly opposite), so I come up with such ugly workaround, which does not work too well.
The workaround
iterate over DataGrid headers (assuming they are just strings) and compute width required for the text
iterate over DataGrid rows per each column (assuming they are TextBlock or TextBox) and compute the maximum width required for the text -- add horizontal paddings for TextBlock/TextBox and horizontal margins for DataGrid cell
sum all differences between DataGrid ActualWidth for columns and the maximum width computed in (2)
increase the window width by the difference computed in (3)
THE PROBLEM
I did several tests, and in some cases the computed width is too big (this is minor problem), for some cases is too small. The problem starts at its core procedure -- computing the required width for TextBox/TextBlock, computed width is always 1 unit less than it should be (if I set the width to computed one, 1 pixel from text is always clipped).
So which factor I am ignoring here? Or maybe better -- is there already some method to resize DataGrid to fit its content?
The code
Computing width required for text (here for TextBlock):
public static double TextWidth(this TextBlock widget, string text)
{
var formattedText = new FormattedText(text, // can use arbitrary text
System.Globalization.CultureInfo.CurrentCulture,
widget.FlowDirection,
widget.FontFamily.GetTypefaces().FirstOrDefault(),
widget.FontSize,
widget.Foreground);
return formattedText.Width+widget.Padding.Left+widget.Padding.Right;
}
Adjusting the Window size to fit DataGrid content (ugly_factor is ugly workaround ;-) since I didn't figure out how to fix it properly I set it to 1.3 and this way my window is "never" too small):
public static void AdjustWidthToDataGrid(this Window window, DataGrid dataGrid, double ugly_factor)
{
var max_widths = dataGrid.Columns.Select(it => window.TextWidth(it.Header as string)
* ugly_factor).ToArray();
foreach (var row in Enumerable.Range(0, dataGrid.Items.Count))
foreach (var col in Enumerable.Range(0, dataGrid.Columns.Count))
{
var cell = dataGrid.GetCell(row, col);
double width = 0;
if (cell.Content is TextBlock)
width = (cell.Content as TextBlock).TextWidth();
else if (cell.Content is TextBox)
width = (cell.Content as TextBox).TextWidth();
if (cell.Content is FrameworkElement)
{
var widget = cell.Content as FrameworkElement;
width = width + widget.Margin.Left + widget.Margin.Right;
}
max_widths[col] = Math.Max(max_widths[col],
width*ugly_factor+cell.Padding.Left+cell.Padding.Right);
}
double width_diff = 0;
foreach (var col in Enumerable.Range(0, dataGrid.Columns.Count))
width_diff += Math.Max(0,max_widths[col] - dataGrid.Columns[col].ActualWidth);
if (width_diff > 0)
window.Width = window.ActualWidth+ width_diff;
}

I just came out of the same problem where I had to give options in a data grid's column to fit its width as per the content of both header and cell. I used the following code:
private void FitToContent()
{
// where dg is my data grid's name...
foreach (DataGridColumn column in dg.Columns)
{
//if you want to size your column as per the cell content
column.Width = new DataGridLength(1.0, DataGridLengthUnitType.SizeToCells);
//if you want to size your column as per the column header
column.Width = new DataGridLength(1.0, DataGridLengthUnitType.SizeToHeader);
//if you want to size your column as per both header and cell content
column.Width = new DataGridLength(1.0, DataGridLengthUnitType.Auto);
}
}
Also I provided an option on columns to fit as per the display (datagrid's width). for that I used the same code above with the following minor change:
column.Width = new DataGridLength(1.0, DataGridLengthUnitType.Star);
FOR ALL COLUMNS : Make sure you keep HorizontalScrollVisibility to Auto.

If I understood your question right and you want to:
A DataGrid where columns are as wide as it's widest content.
The DataGrid fits to its contents.
This can be achieved with databinding:
<DataGrid AutoGenerateColumns="False"
EnableRowVirtualization="True"
Height="111"
HorizontalAlignment="Left"
ItemsSource="{Binding}"
Margin="72,203,0,0"
Name="dataGrid"
RowDetailsVisibilityMode="VisibleWhenSelected"
VerticalAlignment="Top"
Width="{Binding Path=ActualWidth, ElementName=grid}">
<DataGrid.Columns>
<DataGridTextColumn x:Name="Column1"
Binding="{Binding Path=Something1}"
Header="Column1"
Width="Auto" />
<DataGridTextColumn x:Name="Column2"
Binding="{Binding Path=Something2}"
Header="Column2"
Width="*" />
</DataGrid.Columns>
</DataGrid>
Here the first column is as wide is needed and the second is spreaded space which is left. However the DataGrid's width is the same as Grid's widht that is around it, so the wanted outcome is achieved.

In my case, I found DataGrid use HorizontalAlignment="Stretch" VerticalAlignment="Stretch" in default, So I set it to
<DataGrid ItemsSource="{Binding Source}" Width="Auto" Height="Auto"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
Then works.

Marko's comment is the answer:
I'm at a bit of a loss with your resizing logic. First of all, if you set the window's SizeToContent="WidthAndHeight", then the window is shown to the full size of the datagrid. On the other hand, if you show a window at some predefined size, and you want to resize the window once the window is shown, then at that point resizing to the datagrid's desired with is very counter intuitive. Because the resizing will jump from say 100px to 400px, but what if I want to resize to only 250px... (asuming you resize by dragging the corner of the window)

SizeToCells is what worked for me. I like this because its in XAML and it's concise.
<DataGridTextColumn x:Name="nameColumn" Binding="{Binding Name}" Header="Name" Width="SizeToCells"/>

AutoGenarateColumns="False"