Develop Reference

Listbox looks different in xaml viewer than in the program window

I'm working on a WPF Application, and i encountered the following problem,
ignored it until now though.
I want to display a Listbox and a Label on top of it.
For that I have the following XAML code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="1" Content="Packs" Margin="60, 65, 60, 0"/>
<ListBox Grid.Column="1" Height="200" Width="150"/>
</Grid>
This gives the following output in the design window
You can ignore the buttons on the left.
As you can see the Label is right on top of the Listbox.
Now when I open my program, the window makes it seem like the Listbox is on top
of the Label.
I tried a lot rearranging the XAML-Code to display it differently, but this problem stay the same, and although I could bypass it by using values that are simply too big for the designer, it still bugs me that I can't find a solution.
Also please keep in mind that my program will not be resizeable, so dont worry about that.
Thank you for your answers!

You can put Label and ListBox in another Panel (StackPanel) and align that Panel in outer Grid:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1"
Width="150"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Label Content="Packs"/>
<ListBox Height="200"/>
</StackPanel>
</Grid>
this way both elements will be in the center of middle column even if window is resized.

Align control to right - xaml

I have Grid with 3 columns.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" MinWidth="215"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
In first column I have image.
In second Stack Panel.
In third I have my user control and I want to make it horizontal right, but it's align to left.
This is code for my third column
<local:MyControl
Grid.Column="2"
HorizontalAlignment="Right" />

There is no width defined for user control hence it will expand to fit all the width that is available in that column.
Note for 3rd Column <ColumnDefinition Width="*" />

If in your user control, you have designed the layout inside a grid, and the alignment of the elements inside the grid (possibly "LayoutRoot") is left, then the control will take up whole of your third column and your control wilol appear as if it is left aligned, even though you have aligned it to the right.
So, even though your control is aligned to the right, the elements inside the control may be aligned to the left and if the "LayoutRoot" of the control is a grid then maybe it is the cause of your problem.

Cannot get grid splitter to work the way I would like within 3 column grid in WPF

I have the following grid using WPF and a few third party controls (Telerik):
<Grid x:Name="grid2" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="150"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*" MinWidth='80'/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
<RowDefinition/>
</Grid.RowDefinitions>
<telerik:RadBreadcrumb Grid.ColumnSpan="3" Header="RadBreadcrumb"/>
<telerik:RadTreeView Grid.Row="1"/>
</Grid>
<GridSplitter Grid.Column="1" HorizontalAlignment="Center" Width="5" Height="auto"/>
<telerik:RadTransitionControl x:Name="Trans" Grid.Column="2" Width="auto"/>
</Grid>
Currently I am trying to make it so that the grid in column 0 (on the left side) will not re-size while re-sizing the window. I was able to achieve this effect by setting the width of column "0" to either a static 150 or auto. However, when I did this, the grid splitter no longer respected the minimum width of column 2 and allowed it to drag off the screen. By setting both column 0 and 2 to a width of star (the way I have it in the code now) the min widths are respected (the columns can't shrink past the 150 and 80 defined) but they don't re-size properly (the left column re-sizes in proportion to the right column). I would like to somehow get both the resize and the gridsplitter to work at the same time. Let me know if I wasn't clear enough or if more input is needed.

So, this isn't exactly what I was looking for, but it's doing the job for me:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" MinWidth="150" MaxWidth="1000"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
I set the MaxWidth of my left hand column so that you could no longer drag the splitter past the point of no return on the right side. This solution also allows me to set the first column's width to auto (which makes the re-sizing work the way I intended as well). Unless you have a monitor smaller than 1000px wide (which in the environment I'm working in won't happen) this solution will work just using XAML. Again, I'm a little disappointed with this solution but its at least working in a simplistic manner.

How can I get ListView Items to take up all available space?

I have a ListView that takes up the entire width of the screen - I want the items to take up all available space. There will be a maximum of 4 per "screen". I will then want to put the ListView into a FlipView and take 4 items each "flip".
So far I have set the ItemsPanelTemplate to:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
This gives me the four columns, but puts all items into the first column. Perhaps this isn't the right method? If it is the right method, how do I set the column they should be in? Add a value to my object which equals "[Index in Collection] % 4" and set the ItemTemplate Grid.Column to this value?
This all seems a bit too complicated to do something which I imagine might be quite a bit more simple - is it?

Please refer to the following article,
http://www.scottlogic.co.uk/blog/colin/2010/11/using-a-grid-as-the-panel-for-an-itemscontrol/

Silverlight Grid resize issue

I am developing a Silverlight web app and am working now on a child window which is separated in three columns. The left is for messages which will not be displayed always, and two (middle and right) which will be displayed always.
My question is: How can I make the right and middle column use up all the space if the left column doesnt need to show any data? So if for example my child window is 100 in width every of the three should be 33.333 or if the left one doesn't need to be displayed then the other two are both 50. Is there any way without messing in code behind?
Edit: The child window looks like this
<controls:ChildWindow ...
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Name="msgGrid" Grid.Column = 0/>
<Grid Grid.Column = 1/>
<Grid Grid.Column = 2/>
</controls:ChildWindow>
I am passing a bool value (showMessageToUser) into the constructor of the child window and based on that it should be determined what to do

Make the first column "Auto" size and the second two columns 1* (or just *) in width.
The first column will collapse to its contents (which presumably you will show/hide) and the second two will take up 50% each as the * sizing is just a ratio.
Put a name container (another grid?) in the first column and control its visible flag. The other 2 columns will take care of themselves.
<controls:ChildWindow ...
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid x:Name="msgGrid1" Grid.Column=0 Width="100"/>
<Grid Grid.Column=1/>
<Grid Grid.Column=2/>
</controls:ChildWindow>
Control the visibility of msGrid1 to get the effect you wanted. If you also want user control of the the width if column 0 (e.g. with a GridSplitter) you will need code-behind as the two features do not work together.