I thought I understood the WPF content scaling system but ran into an issue that's mysterious to me. I have a very simple popup that is supposed to be used as a loupe that opens on top of an image when the user clicks the image. The XAML is this:
<Popup Name="LoupePopup" AllowsTransparency="True" IsOpen="False" StaysOpen="True">
<Border BorderThickness="2" BorderBrush="Azure" />
</Popup>
In code behind, I then tie the popup's placement to an image that is already showing when the popup is opened. I set the loupe size to half the size of the image with this code:
LoupePopup.PlacementTarget = FullImg;
LoupePopup.Placement = PlacementMode.Relative;
LoupePopup.Width = FullImg.ActualWidth / 2;
LoupePopup.Height = FullImg.ActualHeight / 2;
Further code then moves the loupe along with MouseMove, but that does not really relate to the issue here: I'd expect the loupe to be exactly half the width/height of the image, but it is not - it is quite a bit larger (by about 18%). I verified the actual image size and the actual size of the window on which it is displayed, as well as the mouse coordinates. Those dimensions/point coordinates all made perfect sense, but why would the popup not use the same width/height scaling as the other elements here?
For clarification: The image covers 80% or so of the screen, so this is not just an issue of a few pixels. The window is a child window created in code, and the popup is defined in the XAML of the main window, but both windows are set to full screen size.
Appreciate your thoughts!
Maybe it is so because border thickness is not taking into account when calculating LoupePopup size
or default margin and padding of popup or image
I'm not sure, but I think you should have a look at the Stretch property of the image. If you have a width and a height defined on the image the ActualWidth/-Height are influenced by the Stretch property. Setting it to Fill makes the ActualWidth/-Height equal to the defined Width and Height.
After trying more options I had to realize that the child-versus main window aspect caused the issue. The image was showing in a child window; the popup was defined in the main window. After moving the popup XAML to the child window, the popup dimensions were correct.
Not sure I understand why (both windows have the full screen dimensions and should use the same scaling, but at least this solves my issue. Thanks for trying to help!
Related
Unfortunately I can't provide screenshots for comparison now, since I'm unable to use Aero here at work, but I'm having the following problem:
I'm creating a small WPF application. My main window is not resizable, and the sizes and positions of everything inside are fixed. Everything works fine here using some pre-defined theme (it's "Windows Classic" most likely). Once I run the exe at home though - with Aero enabled - the border size is way bigger, but the actual total window size stays the same it seems to me. So the borders go "into" my window, shrinking the actual usable space and thus some of my controls are overlapped by the borders and it looks asymmetrical.
What can I do about this, if anything? Is there some option to make the borders be attached "outside" my used window space?
Edit: Here is an uploaded image of the Aero version. I hope the problem can be seen. (It's at the bottom)
In my opinion a static size is a bad way in wpf.
There are different solutions:
1. make your window a bit heigher or
2. reduce the margin between your used content elements or
2. use a dynamic size of your content. A grid with rowdefinitions set to "X*" where x is the height in propotion to total height of your content.
But im not sure ... you use a style in your app or is the style directly set into element? If you use a xaml stysle file, is it possible the style overrides your set position or margin properties?
I have a Popup in vertical center of the screen (it fills about 1/3 of it) and stretched horizontally with custom content to interact with user. I want to make current frame fade into gray when popup is shown just like MessageDialog does (still can't post image for example)
There is some workaround with DoubleAnimation object applying to Windows.Current.Content but the result is slightly different from MessageDialog's fogging.
Is there a standard way to achieve graying out current frame when showing Popup like MessageDialog does?
Thanks in advance
Yeah - make the popup take the entire screen and put a Grid below your actual popup that's black and has opacity =~0.5.
Take a look here - full source code for a popup that handles all that (and animation) for you:
http://socialeboladev.wordpress.com/2012/10/14/turn-any-usercontrol-into-a-pleasing-dialogflyout-in-windows-8/
Ok so I have a custom control and I am applying a background gradient to it. The control that it is in is set to anchor left and right and the image is set to Stretch on the control.
Here is what the background image looks like when its in the normal size of the form.
Here is what the background image looks like when the control is stretched.
Obviously I want it to look like the top one as far as the edges go. I am using Inkscape to develop the background image. Any help on how to avoid this blurry edge would be much appreciated.
I suggest trying 9 images in your control, one for every edge and one for every corner plus the middle container, maybe you've seen this technique in a lot of websites. If you set all images with good anchor, the top and bottom edges will stretch only sideways and the right and left will stretch upward and downward. The corners would never change and the container would be completly stretchable. I am worried about flickering though since it is in a winform. Worth trying.
If you use a fixed image, even if it is bigger and you shrink it, you'll lose the corners proportions.
When the system resizes the image it is approximating the missing pixels in the new stretched image. There is nothing you can do to prevent the blurring from occurring. The only sensible option I think is adding the image in higher resolution (which should be easy since you use Inkscape to create them) and have the system shrink it instead of stretch it.
I have a Popup control in WPF that loades it's content dynamically and each time I need to set it's size, how could this be automatically done, so it allways keeps it's size to it's content size.
<Popup
Name="popup1"
StaysOpen="False"
PlacementTarget="{Binding ElementName=myButton}"
Placement="Custom"
PopupAnimation="Fade"
AllowsTransparency="True">
A Popup already sizes according to content.
By default, a Popup is automatically sized to its content. When
auto-sizing occurs, some bitmap effects may be hidden because the
default size of the screen area that is defined for the Popup content
does not provide enough space for the bitmap effects to display.
Popup content can also be obscured when you set a RenderTransform on
the content. In this scenario, some content might be hidden if the
content of the transformed Popup extends beyond the area of the
original Popup. If a bitmap effect or transform requires more space,
you can define a margin around the Popup content in order to provide
more area for the control.
Perhaps your Popup content is having sizing issues due to you restricting growth within your layout container? Your Popup is thus sized accordingly but your Grid for example may have a fixed width.
I had a similar problem a long time back. I want to say it's because the popup is not part of the visual tree and therefor you don't have access to re-render it based on the dynamic contents. What I did was to create a child control that looked like a popup but was part of the visual tree and everything worked as expected.
This is just a foggy old memory but it could be a good jumping point for searching for a more concrete answer.
I have a window in my WPF application that is displayed on occasion. When it is shown it is faded in with an annimation, and when closed it is faded out. Nothing fancy, just a storyboard that modifies the opacity. Actually the window is never really closed, the opacity is just faded out to 0 where it remains until its to be displayed again.
This window is an informative window and doesn't always show the same content. It is sized to content (Width and Height) and works well in that regard. The user chooses the basic area of the screen for it to be displayed (TopLeft, TopRight, Center, BottomLeft, BottomRight).
Before the window is faded in the content is updated. Because the window is sized to content it increases or descreases in size. The width and height can change.
When positioning the window, lets say, in the bottom right corner, I simply take the WorkingArea of the screen (width and height) and then minus the width/height of the window to get the Top and Left position that I need.
The logic works, but the trouble I am having is the Window's Height and Width is not returning the size it is after the content was updated, but is returning the size it was the last time it was displayed. I am assuming this is because it hasn't yet been rendered with the new content.
This causes me grief becuase if the Window is larger than it was the last time it obviously extends off the screen.
I tried positioning the window in the OnContentRendered event, but this only fires once when the Window is created, not after the content has been updated, when the opacity is set to 0.
Does anyone have any idea how I might get an accurate width and height of this window before it is faded in?
Any help would be appreciated!!
I found the answer to my own question. After updating the content a simple call to the window's UpdateLayout() method forces an update. Calls to the width and height then return accurate values.