I was used to Windows Forms and non-resizeable windows when I posted this question, so I did not understand how to make content ajustable to the window. However, now that I understand how to use margins and other properties that allow for "responsive" windows, I highly recommend not to use this method. Use margins and alignment instead.
I've been working with WPF.NET for quite a while now, but there is a problem that has been bugging me since I first started using it in Visual Studio. It seems that when I run my program, the windows shrinks by 10 pixels, in comparison to the designer display.
Here are some pictures to better explain my problem:
Designer mode display:
Actual window when ran:
This has only been occuring in WPF. It does not happen in Windows Forms. It has been happening in VS 2012 and VS 2013.
Is there any way to solve this?
I'm pretty new to all this, and this problem was very frustrating. I worked out that on run, the whole window shrank to the panel/grid size, losing about 10px from the panel/grid (x&y).
^^above didn't help much, no disrespect.
I found this by XAML Designer(from 2010) which helped, maybe it will help you.
But basically, add:
SizeToContent="WidthAndHeight"
(instead of ^Rohit Vats "d:DesignHeight="77" d:DesignWidth="294"") ..in the Window wrapper
Make sure all margins are set to desired value for the content. Worked perfectly for me.
Design height and width might be set on your window which is completely different from actual rendered height and width of control. Remove design heigh and width:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="77" d:DesignWidth="294"> <-- HERE
<Grid>
...
</Grid>
</Window>
On a side note you should totally avoid giving hard coded height and width to your control. Play with relative width and height instead OR simply let your containing panel decide height and width. Otherwise, on window resize your control won't resize per actual window dimensions.
Related
I'm trying to create a gallery-style layout with a ScrollViewer and a WrapPanel in WPF, but the WrapPanel is extending beyond the boundaries of the ScrollViewer. I've tried setting the HorizontalAlignment and VerticalAlignment properties of the WrapPanel to "Left" and "Top" respectively, but it still doesn't stay within the boundaries of the ScrollViewer.
I've also tried setting the height of the WrapPanel to specific values and set the MaxHeight properties of the WrapPanel to limit the size, but it still doesn't stay within the boundaries of the ScrollViewer, and is no longer scrollable. I've also tried wrapping the WrapPanel inside a Grid and set the height of the Grid to the size I want and set the ClipToBounds property of the Grid as "True", but it still doesn't work.
I'm not sure what else I can do to keep the WrapPanel within the boundaries of the ScrollViewer. Can anyone help me figure out how to contain the WrapPanel within the ScrollViewer?
This is my xaml code:
<ScrollViewer Grid.Row="0">
<WrapPanel x:Name="Preview_WrapPanel"></WrapPanel>
</ScrollViewer>
and this is my result in my app, in the beginning, the distance from top is correct but the bottom not. I scrolled a little up to show that the height is not respected in the top region as well:
the width is respected, but i think only because this is the application width.
The thick red border is the area, which the scrollviewer occupies. The wrappanel should be contained inside, kind of like a window, where you can only see whats behind the window and not the trees behind the wall.
the wrappanel gets filled with WebView2 Media, each image around 200x200px:
WebView2 media = new WebView2();
media.Source = new Uri(nftFile.FullName);
media.Width = 200;
media.Height = 200;
this.Preview_WrapPanel.Children.Add(media);
I use Webview2 because the content could pretty much be anything, image, video, pdf, whatever. Also it supports webp
For now though, im only adding images.
There was a known bug with webview2 and it seems it has not been fixed.
Basically, renders on top so cannot be clipped.
https://github.com/MicrosoftEdge/WebView2Feedback/issues/2579
https://github.com/MicrosoftEdge/WebView2Feedback/issues/286
You need a different plan.
Maybe ensure it doesn't matter when they don't clip.
Maybe use images.
Or hope it gets fixed soon.
Andy was correct, this is a known issue. Microsoft knows about it since .net framework Times (>10 years) but refuses to fix the issue so far.
I solved the issue by Installing the Nuget Package CefSharp which uses the chromium engine as well.
What a pitty.
I tried setting WindowStyle="None" in XAML but that makes the Window completely borderless. I need a Window that does not have a title bar, which prevent user from moving it. But still has border so it still looks like a Window :)
WindowStyle="None" does not remove the border by default, you must allow resizing (ResizeMode = CanResize / CanResizeWithGrip) and forbid transparency (AllowsTransparency="False") though as far as i know.
When designing WPF dialog windows in the XAML designer (that are not manually resizeable by the user), the windows automatically resize to fit their content, and everything is fine. But when I run my app, the windows become huge and there's a lot of empty space.
I know this is a "feature" of WPF that can be "fixed" by setting the SizeToContent tag, but another issue arises when I do this: If the window contains a textbox, for instance, and the user enters data that overflows the visible area, the window will stretch to accommodate it. This happens with listboxes, treeviews, you name it.
All I want is for Visual Studio to figure out the ideal window size that it shows me at design time, then set the window to be that size at runtime, and don't change the size after that. It seems like this should be an easy thing to do.
Edit: Figured out part of the problem: I have controls set up in a grid, and the column's width is set to "Auto" which is why everything is resizing.
Use View Box
The ViewBox is a very useful control in WPF. If does nothing more than scale to fit the content to the available size. It does not resize the content, but it transforms it. This means that also all text sizes and line widths were scaled. Its about the same behavior as if you set the Stretch property on an Image or Path to Uniform.
Although it can be used to fit any type of control, it's often used for 2D graphics, or to fit a scalable part of a user interface into an screen area.
<Viewbox>
<Enter your code/>
</Viewbox>
Try setting the window's height and width to Auto. Also, remove the SizeToContent attribute. This should fix it.
I do not think that this is this is something which is commonly requested so it's probably not easy to do, one method i can think of would be starting with automatic SizeToContent and handling the Loaded event and setting:
Height = ActualHeight;
Width = ActualWidth;
SizeToContent = System.Windows.SizeToContent.Manual;
I would like to create a scrollbar in WPF that looks like the one seen in iTunes cover flow. See scrollbar image below, which also shows the reflection of the album art underneath the scrollbar.
Scrollbar Image http://www.barramsoft.com/pub/images/scrollbar2.jpg
Below is a basic scrollbar control in xaml.
<ScrollBar Name="scrollBar1" Height="24" Width="Auto" Orientation="Horizontal"
SmallChange="1" />
How can I get from the above to an iTunes cover flow scroll bar look? The full ready to use source code sample would be preferred.
Start with the ScrollBar ControlTemplate Example in MSDN from http://msdn.microsoft.com/en-us/library/ms742173.aspx (that is much easier to modify than the window style you can get from Blend or ShowMeTheTemplate)
Now start to edit the template, change the colors, the templates for the arrow buttons and the thumb until it looks like you want.
Have you got Expression Blend? If not I'd recommend installing it (there is a 30 day trial version if you don't have an MSDN license).
There are quite a few Expression Blend tutorials out there here's a good place to start for example.
Basically you copy the template for the standard scroll bar which will give you all the elements that go to make it up. You then change what each element looks like until you get it looking how you want it. There will be a fairly large amount of trial and error in this process.
The first task is to show the scrolled area underneath the scrollbar. You have to change the structure of the ScrollViewer control. By default it is a 2x2 Grid so the horizontal scrollbar is under the scrolled area. Edit its template to put the scrolled area and the scrollbar in the same cell, vertically aligning the scrollbar to bottom.
The second part is to style the scrollbar itself. I don't believe this can't be done with rounded rectangles.
I usually extract the template to modify it using Blend, there is also a free ShowMeTheTemplate tool.
Have a look at the WPF Themes project at codeplex. The Expression Blend Theme (light/dark) is very close to the example you've provided. It is released under Ms PL.
I have been working on an app with a datagrid from the wpf toolkit and the width was not specified in the xaml (default to auto), and it was working fine. It would extend the window width as I resized the window. However, all the sudden the "auto" width is massive and I don't know why. When I pull the xaml file up in blend it shows auto width is 50002 pixels. I barely touched anything else in my xaml since it happened. Anyone know why it is doing this and where that number came from? Thanks
The most common cause for this that I've seen is when the control is inside a StackPanel with Orientation=Horizontal. StackPanels don't constrain their controls in the stacking direction so if nothing else constrains the control it grows to some maximum size.
If this is the issue try replacing your StackPanel with an equivalent DockPanel or Grid.
If you were doing any manual resizing using the Visual Studio IDE then perhaps this could have happened or you could have accidently typed in the wrong size of 50002. Removing the widths and setting to auto should fix the issue.