WPF Layout problem

[Lloyd Sheen]

First thanks to those who responded and gave me ideas for books on WPF. I
read a couple and something's are clearer now.

I have a problem with layout which I have been banging my head for the last
couple of days. I have the following scenario:

Two usercontrols which both contain a third usercontrol.

The two main usercontrols are navigation controls and the third usercontrol
is a listview which encapsulates sorting etc.

The first navigator usercontrol has the following XAML (sorry for all the
code I have removed the UserControl.Resources to make it shorter):

<UserControl x:Class="CDsByDate"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:app="clr-namespace:Media_Player">

<DockPanel x:Name="SongsByDatePanel" DockPanel.Dock="Top" >
<Label DockPanel.Dock="Top" HorizontalAlignment="Center"
Height="auto">
Songs By Date
</Label>

<Grid DockPanel.Dock="Top" Height="30">
<Grid.ColumnDefinitions>
<ColumnDefinition Width ="30"></ColumnDefinition>
<ColumnDefinition Width="10*"></ColumnDefinition>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition Width="30"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" VerticalAlignment="Center"
Style="{StaticResource NoButtonBorder}" x:Name="PreviousDay"
Margin="0,2,0,2"
Background="Transparent" IsEnabled="True"
ToolTip="Previous Day">
<StackPanel Orientation="Horizontal" >
<Image Source="..\Images\page-previous-48x48.png"
HorizontalAlignment="Right" Width="24" Height="24" IsEnabled="True"
ToolTip="Search for songs By ..." />
</StackPanel>
</Button>
<TextBlock Grid.Column="1" x:Name="CurrentDateTxt"
HorizontalAlignment="Center" VerticalAlignment="Center" >Current
Date</TextBlock>
<Button Grid.Column="2" VerticalAlignment="Center"
Style="{StaticResource NoButtonBorder}" x:Name="NextDay" Margin="0,2,0,2"
Background="Transparent" IsEnabled="True"
ToolTip="Previous Day">
<StackPanel Orientation="Horizontal" >
<Image Source="..\Images\page-next-48x48.png"
HorizontalAlignment="Right" Width="24" Height="24" IsEnabled="True"
ToolTip="Search for songs By ..." />
</StackPanel>
</Button>
<Button Grid.Column="3" VerticalAlignment="Center"
Style="{StaticResource NoButtonBorder}" x:Name="Today" Margin="0,2,0,2"
Background="Transparent" IsEnabled="True"
ToolTip="Today">
<StackPanel Orientation="Horizontal" >
<Image Source="..\Images\calendar-date-48x48.png"
HorizontalAlignment="Right" Width="24" Height="24" IsEnabled="True"
ToolTip="Search for songs By ..." />
</StackPanel>
</Button>
</Grid>
<app:FolderList DockPanel.Dock="Bottom"
x:Name="CDList"></app:FolderList>
</DockPanel>
</UserControl>


The second navigator has the following XAML:

<UserControl x:Class="ArtistNavigator"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:app="clr-namespace:Media_Player">

<DockPanel x:Name="ArtistNavPanel" DockPanel.Dock="Top" >
<Label DockPanel.Dock="Top" HorizontalAlignment="Center"
Content="Artist Name" Height="auto"/>
<TextBox x:Name="ArtistSearch" DockPanel.Dock="Top" Height="auto"
Background="Transparent"/>
<app:FolderList DockPanel.Dock="Bottom"
x:Name="CDList"></app:FolderList>
<Popup x:Name="ArtistNamesPopup" AllowsTransparency="False"
IsOpen="False" >
<ListBox x:Name="ArtistNamesListBox"
Background="#FF4CCFD9"
Height="200"
SelectionChanged="ArtistNamesListBox_SelectionChanged"
/>
</Popup>
</DockPanel>
</UserControl>

When I look at the first UserControl "CDsByDate" it shows the FolderList
control with no horizontal size. I can tell this since I added a dummy set
of buttons at the bottom of the control to help in debugging the layout.
The second UserControl "ArtistNavigator" shows the FolderList correctly
filling the area between the "Grid" and the bottom of the page with the
FolderList.

I am totally at a loss in this endeavour. I have several other navigation
controls which use the FolderList with no problem. It is only the
ArtistNavigator which is incorrect. I have removed the Popup with no
difference in visual problem.

The only difference between controls is that the ArtistNavigator control has
no items added when the application first shows it.

Thanks,
Lloyd Sheen

 

[Alex Clark]

Hi Lloyd,

The only difference between controls is that the ArtistNavigator control
has no items added when the application first shows it.

Okay admittedly I didn't read through your XAML line by line, but if I were
to guess I'd say your ArtistNavigator (or the FolderList inside it) is
auto-sizing (i.e. sizing to fit content) at some stage, possibly application
startup. Have you tried setting HorizontalAlignment="Fill" on it to force
it to fill it's container, regardless of its content?

Cheers,
Alex

 

[Lloyd Sheen]

Hi Lloyd,



Okay admittedly I didn't read through your XAML line by line, but if I
were to guess I'd say your ArtistNavigator (or the FolderList inside it)
is auto-sizing (i.e. sizing to fit content) at some stage, possibly
application startup. Have you tried setting HorizontalAlignment="Fill" on
it to force it to fill it's container, regardless of its content?

Cheers,
Alex

There is no such thing as "Fill" for HorizontalAlignment. I tried Stretch
but that did nothing.

Is there any tool (I have tried a couple like Snoop) that could help with
this problem.

I guess the real question is : if a developer now spends 90% of the time on
layout why would this be in vogue? This was not my question but I am about
to embark on a development project and I have been asked to evaluate
Winforms vs WPF. The background (code behind) is essentialy the same for
both (program logic) and it seems counter productive to spend so much time
making an app look "up to date" vs functionally correct.

Thanks
Lloyd Sheen

 

[Lloyd Sheen]

There is no such thing as "Fill" for HorizontalAlignment. I tried Stretch
but that did nothing.

Is there any tool (I have tried a couple like Snoop) that could help with
this problem.

I guess the real question is : if a developer now spends 90% of the time
on layout why would this be in vogue? This was not my question but I am
about to embark on a development project and I have been asked to evaluate
Winforms vs WPF. The background (code behind) is essentialy the same for
both (program logic) and it seems counter productive to spend so much time
making an app look "up to date" vs functionally correct.

Thanks
Lloyd Sheen

Ok so I changed the entire main form to put the usercontrols into a
tabcontrol (no border) with buttons to switch tabs.

Now the problem control shows at the bottom rather than at the top with no
fill.

This is beyond ... (fill in the blank). For what I think should be such a
simple thing is now into its 3rd day. I really don't get this layout stuff
at all. It is so counter intutive that it is just about useless.

HELP!!!!!

Lloyd Sheen

 

[Alex Clark]

Lloyd,

I really would recommend reading up a bit more before embarking on
evaluating WPF vs WinForms. I'm still at the playing around stage myself
but the book I'm reading is making some very murky areas clearer. Just my
take on your XAML from the original post, but if I'm visualising it
correctly then I wouldn't have used DockPanels, I'd have used only grids.
Also one of your columndefs is "10*" which IIRC is 10 x the available
remaining space - I think this should just be "1*".

One of the things most hammered into my head about layout also was not to
use hardcoded values for anything, ever, if you can avoid it. Set values to
proportional or "Auto" wherever possible.

Layout is in large part about making apps work properly regardless of the
font size and resolution of the target machine. This can only be achieved
if used properly though - using a canvas control and hard-coding all your
locations and sizes will result in no gain over WinForms. It's basically
best to just auto-size (or proportionately size) everything in your app and
let WPF handle the layout when it comes to rendering.

I think you'd really benefit from reading and researching as much as
possible about layout. I was of the same mindset as you before I started
properly learning WPF - I thought it was just a pointless change that MS was
forcing on us, but the more I've learned about it the more I've realised how
archaic WinForms always was and how badly it needed replacing with something
like this. And that was before I started learning about things like
templating and M-V-VM.

 

[Olaf Rabbachin]

Hi,

This is beyond ... (fill in the blank). For what I think should be such a
simple thing is now into its 3rd day. I really don't get this layout stuff
at all. It is so counter intutive that it is just about useless.

I must admit that, from your XAML, I don't see the problem either (and I've
read through all of it), but that might be because I don't know exactly

Also: have you tried changing that to "*" only?

Do you have a sample solution that illustrates the problem?

Not that I'm a WPF-pro (I've actually started digging into WPF less than
two months ago), but I'd sure give it a try.
I'm in the same boat - not so much regarding WPF, but rather with the
combination of WPF and EF - pretty steep learning curve, I'd say ...

Cheers,
Olaf