I am having trouble sizing a WPF control (I'll use the Grid control in this example) to the size of the Client area of a Window. I realize that the Grid automatically fills all available space by default, however I require the Grid's Width to be set manually so that I may bind to it from another control (a DataGrid with one of its column's Width's set to Star if it makes any difference).
Please consider the following XAML:
<Window x:Class="TestApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="768" Width="1024"
x:Name="mainWindow">
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Auto">
<Grid x:Name="testGrid" Background="DarkGray">
</Grid>
</ScrollViewer>
</Window>
And the following Code-Behind:
using System.Windows;
namespace TestApplication
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
testGrid.Width = mainWindow.Width - (SystemParameters.BorderWidth * 2);
}
}
}
When running this simple application, the Grid has a width that is slightly larger than the Client area of the Window, resulting in a Horizontal Scroll Bar being displayed. If SystemParameters.BorderWidth does not accurately calculate the width of the Window's border, what does?
As per the most recent MSDN documentation, SystemParameters.BorderWidth: Gets the metric that determines the border width of the nonclient area of a nonminimized window.
Here is one way of binding the size of the client width with no code-behind:
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Auto">
<Grid x:Name="testGrid" Background="DarkGray" Width="{Binding Content.ActualWidth, ElementName=mainWindow}">
</Grid>
</ScrollViewer>
This uses your named top-level Window and gets with actual width of it's content, a ScrollViewer in this case. If for some reason you want to want the content of the window to be a different size than the window you can enclose it in an empty Grid so this technique still works.
After having fought with this sizing issue for quite some time, I have finally found an elegant solution to the problem. Though I have alread selected #Rick Sladkey's response as the answer (and answer my question it did), I thought I might post my updated understanding in hopes that it might help someone else down the line.
The real frustration point, it turns out, was in dealing with the ScrollViewer. While sizing my content to the ActualWidth of the ScrollViewer worked wonderfully when it's VerticalScrollBar was not visible, things began to break down as soon as my content grew to a vertically scrollable height. Though I had expected the binding on ActualWidth to resize my contol to fit within the viewable area of the ScrollViewer, in reality it remained the same width and became horizontally scrollable as well.
As it turns out, the fix was actually quite simple. Rather than binding the height or width of a control to the ActualHeight or ActualWidth of the ScrollViewer (respectively), bind the height or width of the control to the ViewportHeight or ViewportWidth of the ScrollViewer.
Instead of setting the width manually, how about binding to the grid's ActualWidth property instead (this will give you an actual value)
Related
How to make web view window re-sizable.Here is the xaml code,
WebView.xaml
<UserControl xmlns:WebViewControls="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView">
<StackPanel Height="704" Width="1309">
<WebViewControls:WebView Name="webViewConfiguration" Height="500" Width="879" />
</StackPanel>
</UserControl>
WebView.xaml.cs
webViewConfiguration.Navigate(AppConfigURL);//some url
The issue here is webview window renders with the given width and height , irrespective of screen size.In larger screen's or monitors webview window appears to be smaller and in smaller screens it appears to be large.Is there a way to dynamically render it using screen size or a way to resize it.
Thanks in advance.
ViewBox seems to be the go to tool if you want your application to be re-sizable, however, I still cannot get my head around on how to properly use it.
Here's my current code (this approach was recommended by a colleague)
<Window x:Class="WpfApp3.MainWindow"
WindowState="Maximized"
Width="{DynamicResource {x:Static SystemParameters.MaximizedPrimaryScreenWidthKey}}"
Height="{DynamicResource {x:Static SystemParameters.MaximizedPrimaryScreenHeightKey}}">
<Viewbox Stretch="UniformToFill">
<Grid Background="Peru"
Height="1080"
Width="15000">
<Grid Background="Bisque"
HorizontalAlignment="Left"
Width="{DynamicResource {x:Static SystemParameters.MaximizedPrimaryScreenWidthKey}}" >
</Grid>
</Grid>
</Viewbox>
</Window>
The approach is the following:
Wrap everything in a ViewBox with Stretch property set to UniformToFill, such that the aspect ratio of inner-elements in preserved
For the outer most grid, set the Width to some arbitrary huge number and Height to some arbitrary small number
We now have a huge rectangle going off screen to the right, while the height is the height of the window
Create a second grid and horizontally align it the the left
Put all other elements in this grid
Problems
The width of the second grid is set to the width of the primary screen, but because of the ViewBox and its stretch property the width if cut off, so I cannot really use it, as all the elements will be slightly-aligned to the left of the screen
Current layout
Questions
Is this the recommended way of creating dynamic / re-sizable applications in WPF?
Is this the correct way of using the ViewBox control?
How can I fix my problem?
Are there other solutions to using the ViewBox control?
I had this issue when I was trying to make a telerik grid re-sizable. Using a viewbox is the recommended way of creating re-sizable applications in WPF. I've found that using a dock panel is better than margins because it holds the control in place, while the viewbox controls the sizing. You can also add a grid with rows / columns if you need multiple controls. I'm very new to development, so this may not be best practice, however it works for our applications.
<Viewbox Stretch="Fill"
Grid.Row="1"
Grid.Column="1">
<DockPanel Height="300">
<Grid>
*User controls*
</Grid>
</DockPanel>
</Viewbox>
When vertically scrolling into view, I can pull the last row into view, but on releasing the drag, the last row springs back (partially) out of view. I think inaccuracy of measure can be attributed to a grid that I'm using as the listbox's header but I'm currently unable to fix this to that they work together correctly.
<Border>
<StackPanel>
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto">
<StackPanel>
<Grid x:Name="_headers"/>
<ListBox x:Name="_dataGrid"/>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Border>
**Update
This example removes the scroll and also suffers from the same truncated row problem as the example above. The header grid row also doesn't scroll horizontally with the listbox rows which is an even bigger problem for my solution.
<Border>
<StackPanel>
<Grid x:Name="_headers"/>
<ListBox x:Name="_dataGrid"/>
</StackPanel>
</Border>
It's because you put ScrollViewer inside StackPanel. StackPanel doesn't limit control's size so the ScrollViewer can grow forever and never scroll properly. Its size must be limited. Grid can do it perfectly (if only the height of the row is set to *, not Auto).
Also, in my opinion you shouldn't put ListBox inside ScrollViewer, because ListBox already has its own scroll feature.
Never ever use a ListBox inside a ScrollViewer, you will run into scrolling conflicts.
As far as I can see, you need to add a header to your list. LongListSeelctor might be the best option, since it has got a Header property (also Footer):
See: http://www.geekchamp.com/articles/the-new-longlistselector-control-in-windows-phone-8-sdk-in-depth
Right now I have a DockPanel that contains a toolbar and BrowserWindow. When I re-size the BrowserWindow to fit content, I want that change to propagate up into the DockPanel and re-size automatically. Is there a setting for this?
So the layout of my app is essentially:
-Browser Control Class
--DockPanel
----Toolbar (docked to Top)
----Browser Window Class
------Grid
--------Menu
--------Embedded Browser
Basically I want the size that I set on my Browser Window Class to automatically re-size the DockPanel.
Before applying size to Browser Window:
After applying size to Browser Window (I want to get rid of that extra space surrounding the embedded browser):
DockPanel has a LastChildFill property that you can use. Try to play with it a little. Remember that BrowserWindow needs to be the last child in DockPanel.
I think you will also have to change something in your Grid. By LastChildFill property should be set. You are on right track at least.
Change your DockPanel to a StackPanel, put it inside a Grid, and set it's HorizontalAlignment and VerticalAlignment to Center
You might also need to play with the the Height/Width of the WebBrowser to specify the initial size
<Grid>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Menu />
<WebBrowser Height="SomeValue" Width="SomeValue" />
</StackPanel>
</Grid>
Can't you specify Width="Auto"?
I've created a user control using WPF and I want to add it to window. I've done that, but I can't make my control have a height higher than the height it has in its own xaml file. My MaxWidth and MaxHeight are both infinity, but I can't make the control any taller than what it is in its xaml file.
To get around this, I have to make all my user control enormous so I'll be able to size them to whatever I want. This doesn't seem right, I have to be missing something.
Removing the height and width is the way to go. The designer(blend) has some special designer width and height properties that they can use to design in, but won't set the height for runtime.
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="412" d:DesignHeight="230"
That is the xaml that will be at the top of the Window/UserControl. This should help explain things.
Why do you want your control to have a height higher than the height it has in its own XAML file? Couldn't you just remove the height in the control's XAML file, and explicitily set the height of the control when you declare it in the other XAML files (or code) that use it?
If I remove the height and width in the controls XAML file I lose the ability to use the designer for my user control. So short answer, that did solve my problem, but now I can't use the designer for user controls. Doesn't seem like I'm any better off.
The problem could be that the inner controls in your user control aren't stretching to your control. Try setting HorizontalAlignment="Stretch" or Width="Auto" on the inner controls, or you could try binding the Width property.
Ok, after some further investigation, I've misspoken. its the Grid thats causing the problem. If I set the grid Width and Heigth to Auto then everything works fine, but I lose the ability to use the designer.
I have all of the alignments set to Stretch for both the Grid and its controls.
So in summary, everything works fine if I set Grid.Width = Auto and Grid.Height = Auto, but when i do that, I lose the ability to use the designer.
I'm not aware of any width/height attributes for the VS designer if that's what you're using. I've used the MinWidth/MinHeight attributes in my xaml pretty effectively, however, to deal with the situation that I think you're describing.