We Keep Coding

Dock one panel between two others

I have three panels:
The first one is on the top, it holds some buttons only. It will be as high as many buttons will be there.
The second ones should be directly under it, it holds a canvas that should take up most of the window.
The third one is "some kind of" status bar, it will hold some labels and data. It will be also only as high as many labels are added there.
I don't want to hardcode any sizes. So I am docking the first panel to the Top of the parent. The same goes for the 2nd panel (canvas). I am docking it also to the top. The third panel is docked to the bottom.
I can't make the canvas(2nd panel) fill the whole space between 1st panel and 3rd panel. How to do it?
<Window x:Class="MyProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MyProject"
mc:Ignorable="d"
Title="MainWindow" Height="700" Width="800">
<DockPanel LastChildFill="False">
<StackPanel DockPanel.Dock="Top">
<GroupBox x:Name="grBoxSettings" Header="Settings" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="90" Margin="5,0,5,0">
<WrapPanel x:Name="wrapPanelButtons" HorizontalAlignment="Left" VerticalAlignment="Top" Width="110">
<Button x:Name="btnTest" Content="Test" Margin="5,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" Width="100"/>
</WrapPanel>
</GroupBox>
</StackPanel>
<Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DockPanel.Dock="Top"/>
<DockPanel LastChildFill="False" DockPanel.Dock="Bottom">
<GroupBox Header="Version" DockPanel.Dock="Right">
<Label x:Name="lblVersion"/>
</GroupBox>
</DockPanel>
</DockPanel>
</Window>

Either use a Grid with three RowDefinitions with Height= 1st: Auto 2nd: 1* 3rd: Auto,
Or Simply switch around the order in your DockPanel:
<DockPanel LastChildFill="True">
<StackPanel DockPanel.Dock="Top">
<GroupBox x:Name="grBoxSettings" Header="Settings" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="90" Margin="5,0,5,0">
<WrapPanel x:Name="wrapPanelButtons" HorizontalAlignment="Left" VerticalAlignment="Top" Width="110">
<Button x:Name="btnTest" Content="Test" Margin="5,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" Width="100"/>
</WrapPanel>
</GroupBox>
</StackPanel>
<DockPanel LastChildFill="False" DockPanel.Dock="Bottom">
<GroupBox Header="Version" DockPanel.Dock="Right">
<Label x:Name="lblVersion"/>
</GroupBox>
</DockPanel>
<Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</DockPanel>
Also, here's some documentation for the Dock Property:
If you set the LastChildFill property to true, which is the default setting, the last child element of a DockPanel always fills the remaining space, regardless of any other dock value that you set on the last child element. To dock a child in another direction, you must set the LastChildFill property to false and must also set an explicit dock direction on the last child element.

Making a Scrollviewer fill the available space in a DockPanel

I somewhat of a WPF noob and am using a DockPanel to display the text content of an email in a TextBox in a ScrollViewer. The panel has a button bar and area for the email headers at the top, a button bar at the bottom, a panel at the right and the email itself should fill the remaining space dynamically:
[Banner at top, below which is a button bar and box with email headers. At the bottom is another full width button bar. The space between them is divided into a fixed-width panel at the right and a large text box for the email contents.]
http://rowlandsoftware.com/Screenshots/LongEmail.png
(The DockPanel sits inside a grid that provides the bit at the very top and is used when the email is not visible.)
The problem is that if the email is too short or too narrow, the textbox fails to fill the remaining width. In this screenshot, you can see some of the underlying stuff between the box and the panel:
[Between the text box and the panel is a column that is not filled. Part of what lies under it can be seen.]
http://rowlandsoftware.com/Screenshots/TooNarrow.png
The XAML is:
<DockPanel x:Name="EmailCanvas" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Visibility="Collapsed" Height="Auto">
<DockPanel x:Name="topButtonBar" DockPanel.Dock="Top" Height="50" Background="White">
<Button x:Name="btnReturn" DockPanel.Dock="Left" Content="Return to List" Click="btnReturn_Click" />
<Image Width="15" Source="Images/transparent.png" />
<Button x:Name="btnTextToggle" Content="Plain text" Click="btnTextToggle_Click" />
<Button x:Name="btnZoomOut" Content="Zoom Out" />
<Button x:Name="btnZoomIn" Content="Zoom In" />
<Image Width="150" DockPanel.Dock="Right" Source="Images/transparent.png" />
<Button x:Name="btnPrint" DockPanel.Dock="Right" Content="Print" Width="100"/>
<Image DockPanel.Dock="Right" Source="Images/transparent.png" />
</DockPanel>
<StackPanel x:Name="EmailHeaders" Orientation="Horizontal" DockPanel.Dock="Top" Width="Auto" Background="Linen">
<StackPanel Orientation="Vertical">
<TextBlock Text="Subject:" FontSize="16" />
<TextBlock Text="Time Sent:" FontSize="16"/>
<TextBlock Text="Other Recipients: " FontSize="16"/>
</StackPanel>
<StackPanel Orientation="Vertical">
<TextBlock x:Name="labSubject" Text="Subject:" FontSize="16" />
<TextBlock x:Name="labDateTime" Text="Sent:" FontSize="16"/>
<TextBlock x:Name="labSpare" Text="Other Recipients:" FontSize="14"/>
</StackPanel>
</StackPanel>
<DockPanel x:Name="bottomButtonBar" DockPanel.Dock="Bottom" Height="80" >
<Image Width="150" DockPanel.Dock="Left" Source="Images/transparent.png" />
<Button x:Name="btnDelete" DockPanel.Dock="Left" Content="Delete" />
<Image Width="150" Source="Images/transparent.png" />
<Button x:Name="btnSave" Content="Save" />
<Image Width="150" Source="Images/transparent.png" />
<Button x:Name="btnReply" Content="Reply" />
<Image Width="150" DockPanel.Dock="Right" Source="Images/transparent.png" />
</DockPanel>
<StackPanel DockPanel.Dock="Right" Orientation="Vertical" Background="White" Width="150">
<Button x:Name="btnAttachments" Content="Attachment"/>
</StackPanel>
<ScrollViewer x:Name="eTextViewer" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
<TextBox x:Name="eText" Background="White" HorizontalAlignment="Stretch" TextWrapping="Wrap" FontFamily="Verdana" FontSize="18" IsReadOnly="True" />
</ScrollViewer>
<!--Image Width="Auto" Height="Auto" DockPanel.Dock="Bottom" Source="Images/white.png" /-->
<WebBrowser x:Name="eHTML" Height="Auto" DockPanel.Dock="Top" Visibility="Collapsed" />
</DockPanel>
The box is extended only to fill the available height, not the width. The documentation for the DockPanel.LastChildFill Property says,
If you set the LastChildFill property to true, which is the default setting, the
last child element of a DockPanel always fills the remaining space, regardless
of any other dock value that you set on the last child element.
msdn.microsoft.com/en-us/library/system.windows.controls.dockpanel.lastchildfill%28v=vs.110%29.aspx
That does not appear to be the case: in my program it is only filling height, not width. LastFillChild=true is the default, but explicitly setting it to True or False doesn't make a blind bit of difference.
Interestingly, if you set DockPanel.Dock="Top" on the ScrollViewer, it fills the available width but not the height, leaving some of the underlying stuff showing between the text box and the bottom button bar. Again this is contrary to the documentation which says that the dock value set on the last child element is ignored.
Setting HorizontalAlignment="Stretch" to both the ScrollViewer and the TextBox and HorizontalContentAlignment="Stretch" to the ScrollViewer makes not a jot of difference.
So my question is, how can I ensure that the textbox fills the available space in the DockPanel even when the contents of the email are too short?
UPDATE: I have just noticed that if I remove the WebBrowser that is set initially to Visibility="Collapsed", then it works fine. I guess that its presence fools the DockPanel into regarding it as the LastChild even though it is Collapsed.
However, I need to toggle between displaying the email in the web browser and the text box, so removing it isn't an option. Both need to be treated as last child when they are visible. Any ideas?
UPDATE 2: So I wrap the scrollviewer and the web browser in another container, e.g. grid, which is the Last Child. Then I can toggle between the the two but they both fill the space.
Thanks guys. I wouldn't have got there without humiliating myself in public ;)

DockPanel will work, but beware of Collapsed items. Although the documentation says that a collapsed item has no effect on layout, with DockPanel it does if it is the LastChild.
The solution in my case was to add another container as the last child, and place the two items that I wanted to toggle between in that container. Then both will fill the remaining space in the panel.

Problems with flyout over itemscontrol in Windows Phone 8.1

I've got the following piece of XAML code:
<Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
<ScrollViewer>
<ItemsControl ItemsSource="{Binding History}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Tapped="HistoryItemTapped">
<FlyoutBase.AttachedFlyout>
<Flyout>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ScrollViewer>
<TextBlock Foreground="{ThemeResource PhoneMidBrush}" FontSize="{ThemeResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Left" Text="{Binding Expression}" />
</ScrollViewer>
<ScrollViewer>
<TextBlock FontSize="{ThemeResource TextStyleExtraLargePlusFontSize}" HorizontalAlignment="Right" Text="{Binding Result}" />
</ScrollViewer>
</StackPanel>
</Flyout>
</FlyoutBase.AttachedFlyout>
<TextBlock Foreground="{ThemeResource PhoneMidBrush}" FontSize="{ThemeResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Left" Text="{Binding Expression}"
TextTrimming="CharacterEllipsis"/>
<TextBlock FontSize="{ThemeResource TextStyleExtraLargePlusFontSize}" HorizontalAlignment="Right" Text="{Binding Result}"
TextTrimming="CharacterEllipsis"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
There are two problems I can't solve:
The flyout is shown upon tapping on one of items:
private void HistoryItemTapped(object sender, TappedRoutedEventArgs e)
{
FlyoutBase.GetAttachedFlyout((FrameworkElement)sender).ShowAt((FrameworkElement)sender);
}
However, no matter how I set up the flyout it always shows on the top of the screen, not over the tapped item. Why?
The flyout contains two TextBlocks on separate ScrollViewers. The text on one of them exceeds width of the flyout, bt the scrollviewer does not appear to be working (I cannot scroll horizontally the textblock). Why is that?

So let's knock these out real quick. Your #1 would be expected result, it's just going off the default FlyoutPlacementMode enumeration wherein generally your flyout is just meant to appear over the top in one of 5 spots, Top, Bottom, Left, Right, or Full(Center)
How to fix it, ditch the flyout control and just animate your own panel to do the same thing on a tap event or whatever, not hard at all.
Your #2, if I remember right the default on ScrollViewerfor something like the HorizontalScrollBarVisibility is False by default. So just add HorizontalScrollBarVisibility="Auto" to it.
Hope this helps, cheers

WPF Button with multiple text elements for 10 foot gui

I am trying to create buttons for a 10-foot GUI using WPF. Each button requires a little more data than just a single text string and an image, maybe 2-3 strings located in different positions and some imagery.
I have tried
<Button Height="52" HorizontalAlignment="Stretch" Name="button1" Width="407">
<Button.Content>
<DockPanel LastChildFill="True" HorizontalAlignment="Stretch">
<TextBlock Name="textBloczk2" Text="ABC" TextAlignment="Left" DockPanel.Dock="Left"/>
<TextBlock Name="textBlxock1" Text="CDE" TextAlignment="Right" DockPanel.Dock="Right"/>
</DockPanel>
</Button.Content>
</Button>
But no matter which inner container I use, the button seems to disregard the layout from the DockPanel and the combined text ends up in the middle of the button. Am I doing something wrong or should I be using a different outer container ?

The problem seems to be that the DockPanel's width is so small that the Right and Left panels are the same width as your TextBlocks.
This seems to work as expected (setting the width of the DockPanel):
<Button Height="52" HorizontalAlignment="Stretch" Name="button1" Width="407">
<Button.Content>
<DockPanel LastChildFill="True" Width="300">
<TextBlock Name="textBloczk1" Text="Left" DockPanel.Dock="Left" />
<TextBlock Name="textBlxock2" Text="Right" DockPanel.Dock="Right" />
<TextBlock Name="textBlxock3" Text="Top" DockPanel.Dock="Top" />
<TextBlock Name="textBlxock4" Text="Bottom" DockPanel.Dock="Bottom" />
</DockPanel>
</Button.Content>
</Button>

Try to add "HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" to your button. This way dockpanel will occupy all space inside the button.

Why does the button size increases as the listbox size gets populated with data?

I'm a newbie to c#. I have designed a windows program with button and listbox. The listbox populates the log as the script runs the application. However, as the listbox gets populated with log, the button and label increases which makes the stack panel very ugly?
Any help/advice would be appreciated. Below is my xaml code.
<Grid>
<Border BorderBrush="Black" BorderThickness="2" Margin="0,11,0,5" CornerRadius="5" Background="White">
<StackPanel Orientation="Horizontal" Margin="7,10,7,2">
<StackPanel Orientation="Vertical">
<TextBlock Text="City" Margin="5" HorizontalAlignment="Center"></TextBlock>
<ComboBox Name="City" SelectedValue="Chicago" SelectedValuePath="Name">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name,Mode=OneWay}"></TextBlock>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
<Button Name="btnEnter" Content="Enter" Width="200" Margin="4" Padding="6" Click="btnEnter_Click"></Button>
<Button Name="btnViewLog" Content="View Log" Width="100" Margin="4" Padding="6" Click="btnLog_Click"></Button>
<ListBox Name="lbLog" Visibility="Collapsed">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Description}" IsReadOnly="True" BorderThickness="0" Background="Transparent"></TextBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
Thanks.
Ash

Without your Xaml, it is hard to diagnose the problem, so please try to post it with any further questions. It SOUNDS like it is a horizontal StackPanel, and the elements are all next to each other.
If the orientation of your StackPanel is Vertical, set the HorizontalAlignment on the button to Left, Right, or Center. If the StackPanel orientation is Horizontal, set the VerticalAlignment on the button to Top, Bottom, or Center.
I'm pretty certain both settings are "Stretch" by default, which means they will try to fill all the space that is available, rather than sizing to their content.