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.
Related
I have a textblock on a window which is contained in a scroll viewer. For the textlblock I have set the text wrapping to "WrapWithOverflow". In addition I bound the textblock width property to the actual width of the scroll viewer.
My desired behavior is, that I can resize my window and the textblock should wrap the content. The window should only show the scrollbars when other controls (e.g. the buttons in the example xaml get cut)
Xaml:
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<DockPanel Margin="5">
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
<Button Content="First Button" Margin="0,0,10,0"/>
<Button Content="Second Button"/>
</StackPanel>
<DockPanel>
<TextBlock VerticalAlignment="Center" IsHitTestVisible="False" TextAlignment="Center" TextWrapping="WrapWithOverflow"
Width="{Binding RelativeSource={RelativeSource AncestorType=ScrollViewer}, Path=ActualWidth}" MaxWidth="260">
Just a small line<LineBreak />
This is the long line which will wrap during resize</TextBlock>
</DockPanel>
</DockPanel>
</ScrollViewer>
But I see the scroll bars even befor the buttons get cut. I guess this is because of the margin in the dockpanel which is required in my case.
I guess this is because of the margin in the dockpanel
Correct.
...which is required in my case.
Why? You should move the Margin to the StackPanel:
<DockPanel>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="5">
...
...or the buttons:
<DockPanel>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
<Button Content="First Button" Margin="5,5,5,5"/>
<Button Content="Second Button" Margin="5,5,0,5"/>
</StackPanel>
...
This is necessary as the margins are included in the ActualWidth that you bind to.
Everything is fine when the text is default on startup before, but when I add song name, status is moving to right and status bar are outside area. after
<StatusBar Margin="0,730,0,0" DockPanel.Dock="Bottom" >
<WrapPanel >
<Label x:Name="tytulUtworu" HorizontalAlignment="Left">music: none </Label>
<Label x:Name="lblstatusPolaczenia" Margin="200,0,0,0" HorizontalAlignment="Center">status: disconnected</Label>
<ProgressBar Width="100" Height="15" Value="50" Margin="200,0,0,0" HorizontalAlignment="Right" />
</WrapPanel>
</StatusBar>
How can I repair this?
Instead of using a WrapPanel, try using a Grid. That way you'll have fixed columns that won't affect the other elements if text is added
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label x:Name="tytulUtworu" HorizontalAlignment="Left">music: none </Label>
<Label x:Name="lblstatusPolaczenia" Grid.Column="1" HorizontalAlignment="Center">status: disconnected</Label>
<ProgressBar Width="100" Height="15" Value="50" Grid.Column="2" HorizontalAlignment="Right" />
</Grid>
You can adjust the Width on each ColumnDefinition to get better sized columns for your use
Firstly, ditch the margins.
They are not helping, they just make things less obvious as to how they should be aligned.
From your margin values, I'm guessing that you want the status bar to show the label on the left, another in the center, and the progress bar on the right.
Below shows how to do this with a second dock panel.
Dock panel is ideal here as it is consistent in the way it reports its size to child components.
If you want to place this status panel on another DockPanel, there are a few things which must be done before it will render as you need it to.
Firstly, you main dock panel must have content, otherwise the boundary panels will not render in the right place.
Secondly, if you have set LastChildFill=True, you must add your main content as the last item.
If you set the main content then add your status bar, even though you have docked it to the bottom, it will still try to fill the panel.
I've updated the code snippet after testing it (my first attempt was typed straight into SO, sorry it didn't work).
<StatusBar DockPanel.Dock="Bottom"
Name="statusBar"
Height="50"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<DockPanel LastChildFill="True"
Width="{Binding ActualWidth, ElementName=statusBar, Mode=OneWay}">
<ProgressBar DockPanel.Dock="Right"
Width="100"
Value="50" />
<Label x:Name="tytulUtworu"
DockPanel.Dock="Left"
ContentStringFormat="music: {0}"
Content="none" />
<Label x:Name="lblstatusPolaczenia"
HorizontalContentAlignment="Center"
Content="disconnected"
ContentStringFormat="status: {0}" />
</DockPanel>
</StatusBar>
So I have a rather interesting question. I have a viewbox that has a few elements in it (a custom user control for an image, a canvas, a label, and a textbox). What I want is to try and have all elements scale with the viewbox, but I want the label and the textbox to have a "Max Size." I have tried using a max width and height on these controls but they seem to ignore it. If someone could take a look at my code below an slap me for what I am doing wrong that would be appreciated.
<Viewbox Name="myViewBox" Stretch="Uniform">
<!--Grid used to track mouse movements in this element for other reasons -->
<Grid Name="grdViewboxGrid" MouseMove="trackMouse">
<Canvas Name="cvsViewboxCanvas" MinWidth="270" MinHeight="270"
VerticalAlignment="Top" HorizontalAlignment="Center"
Panel.ZIndex="1" Background="Black"
MouseUp="Canvas_MouseUp"
MouseMove="Canvas_MouseMove">
<Grid>
<!--Would rather not post here for Intellectual Property reasons-->
<!-- Extension of the image control -->
<CustomImageUserControl />
<Grid>
<Grid Width="{Binding LabelWidthPercentage}"
MaxWidth="50"
Height="{Binding LabelHeightPercentage"
MaxHeight="26"
SnapsToDevicePixels="True" VerticalAlignment="Top"
HorizontalAlignment="Left" Margin="5" IsHitTestVisible="False">
<Label Name="lblViewboxLabel" HorizontalAlignment="Left"
Padding="5,5,5,0" Margin="0,5,0,0"
Style="{x:Null}"
Content="{Binding lblContent}" />
</Grid>
<Grid>
<Grid Width="{Binding TextBoxWidthPercentage}"
MaxWidth="156"
Height="{Binding TextBoxHeightPercentage}"
MaxHeight="45"
SnapsToDevicePixels="True" Vertical="Top"
HorizontalAlignment="Right" Margin="5" IsHitTestVisible="False">
<Border Style="{DynamicResource CustomBorder}" />
<Grid>
<Textbox Name="txtViewboxTextBox" Text="{Binding txtViewbox}" />
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Canvas>
</Grid>
</Viewbox>
If I am not including something that is needed please let me know and I will update my question. Any help would be greatly appreciated this is now day 4 on this issue sadly :-(
I am not sure why you need so many overlapping Grids, but I hope that I can answer your question nevertheless:
In order to have the label left of the text box and to assign a maximum width to each of these two controls, use a Grid with two columns and set the MaxWidth property for each column. Then, assign the label to the left column (the one with index 0) and assign the text box to the right column (index 1). The corresponding code fragment looks like this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="30"/>
<ColumnDefinition MaxWidth="156" MinWidth="30"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" x:Name="lblViewboxLabel" HorizontalAlignment="Left" Foreground="Yellow"
Padding="5,5,5,0" Margin="0,5,0,0"
Style="{x:Null}"
Content="{Binding lblContent}" />
<TextBox Grid.Column="1" x:Name="txtViewboxTextBox" Text="{Binding txtViewbox}" Background="Orange"/>
</Grid>
I also have assigned a MinWidth to the right column; this is necessary to make sure that the text box does not completely disappear if it contains no text.
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.
I have the following setup
<grid>
<StackPanel>
<ListBox>
<TextBlock> ->Text you see getting cutt off<-
I have tried both just doing listbox.Add(String) and dynamically creating a TextBlock, assigning it text and then adding it to the listbox. Both produce identical results.
The image shows the listbox scrolled down half wayish. It appears the listbox has the correct height but the text inside hits some kind of limit.
UPDATE I changed the listbox to a scroll viewer and also hardcoded the Textblock in. Still same exact results
<Grid x:Name="theGrid" Grid.Row="1" Margin="12,0,10,0">
<StackPanel x:Name="TitlePanel" Grid.Row="0">
<TextBlock Text="Networking Tools" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<StackPanel x:Name="stack">
<TextBlock x:Name="inputIndicator" Margin="12,0,0,0">
<Run Text="Enter IP OR Domain"/>
</TextBlock>
<telerikPrimitives:RadTextBox x:Name="input" Text="google.com" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Grid.Row="1" Height="84" Width="458"/>
<telerikInput:RadListPicker SelectionChanged="picker_SelectionChanged" x:Name="picker" HorizontalAlignment="Left" VerticalAlignment="Top" Width="436"/>
<Button Click="Button_Click" Content="Go" HorizontalAlignment="Left" VerticalAlignment="Top" Width="456"/>
<ScrollViewer HorizontalAlignment="Left" Height="392" Width="Auto" x:Name="list" VerticalAlignment="Top">
<TextBlock Name="content" Height="Auto" Width="Auto"/>
</ScrollViewer>
</StackPanel>
<UI:AdControl ApplicationId="test_client" AdUnitId="Image480_80" Height="80" Width="480"/>
</StackPanel>
<telerikPrimitives:RadBusyIndicator Margin="0,0,0,0" Height="106" Width="116" AnimationStyle="AnimationStyle1" x:Name="busyIndi" />
</Grid>
UI elements in Windows Phone 7 have a maximum renderable height and width of 2048 pixels. Any content that is larger than that gets clipped. The limit is only slightly higher for Windows Phone 8.
You did not mention how much text you are trying to show, but if it is very long, you could be hitting that limit.
There are a few ways you could handle this:
1) Break the text into smaller chunks and add individual TextBlocks to your StackPanel for each chunk.
2) Create a custom control that does the above for you, like this one: http://blogs.msdn.com/b/priozersk/archive/2010/09/08/creating-scrollable-textblock-for-wp7.aspx
3) Use a WebBrowser control instead of a TextBlock, and use its NavigateToString method to put your text in there.