I'm making a WPF Hud, and I'm not such a WPF expert.
I need a Window with draggable usercontrols and which are auto-resized when I expand/reduce the Window.
I can achieve the first feature by using a Canvas container and using MouseMove event of the Window.
I can achieve the second feature by using a Grid container and setting childrens both properties HorizontalAlignment VerticalAlignment to Strech.
Of course I cannot use both containers, so is there a third container that can help me on doing such what requested?
Actually I'm trying to use the Canvas and determining the width/height of the childrens manually, but I don't like this approach.
Any suggestion?
Thanks,
Luca
Leaving out the details on dragging controls, etc., try something like:
<Window x:Class="AdHocWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="439" Width="616"
Title="MainWindow">
<Viewbox>
<Canvas Width="600" Height="400" Background="Blue">
<Rectangle Stroke="Orange" Width="200" Height="100" Canvas.Left="10" Canvas.Top="5"/>
<Ellipse Stroke="Yellow" Width="350" Height="200" Canvas.Left="225" Canvas.Top="150"/>
</Canvas>
</Viewbox>
</Window>
This will create a Canvas object with an initial size of 600x400. When you resize the window the canvas and the objects within it will be scaled so that they take up the same amount of relative space. You'll need to size the containing Window appropriately as well...normal resizable windows have 39 pixels of chrome vertically and 16 pixels horizontally, so take that into account.
Related
I want to make a full screen WPF app that looks the same on all machines with different screen resoltion. I created my MainWindow.xaml with a 800*480 px resoultion. I made a menu on the top of the window like this:
<Grid Height="480" Width="800">
<Menu FontSize="25" Margin="0,0,0,442" >
<MenuItem Header="File" />
</Menu>
</Grid>
But when I started the app in Debug Mode, the menu was in the center of the screen. I guess it was because my screen resoultion is 1366*768 px.
So what should I do to make my program look the same on different resoultions in full screnn mode?
UPDATE: I want it to be like Photoshop for example. Photoshop looks almost the same on different resoultions. Images:
http://i.stack.imgur.com/W1SL6.png
http://i.stack.imgur.com/7KYxX.png
UPDATE : I just want to know what these values should be to make the program work like I want it to:
Height of Window,
Width of Window,
Height of Grid,
Width of Grid,
Sorry bros, I'm such a beginner :\
Another method is to use ViewBox:
<Viewbox StretchDirection="Both" Stretch="Uniform" />
For example:
<Window
Height="480"
Width="800">
<Viewbox StretchDirection="Both" Stretch="Uniform">
<Grid Height="480" Width="800">
</Grid>
</ViewBox>
</Window>
Now when you resize your window, all elements resize too.
It's not really going to be possible to make an application look exactly the same in every resolution. One of the problems with this is text - it's difficult to scale text in the same sense as you can a button, or a ListBox, or whatever.
But, one of the things you can do to make it so that your application looks substantially similar is to use relative positioning and sizing rather than absolute, as you are now.
I've rarely found it's useful or successful to use margins like the one you have above, where the Menu is offset by 400-some pixels. Typically, this ends up making your design look good only at the exact size at which you designed them. If you want this at the top of the control, you could do the following:
<Menu ... VerticalAlignment="Top" ...>
This would always have this menu aligned to the top of your Window. Likewise, if you wanted the menu to take up the same amount of relative vertical space in the window regardless of the absolute size of the window, you could use the Grid.RowDefinitions property:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="10*"/>
<RowDefinition Height="90*"/>
</Grid.RowDefinitions>
<Menu Grid.Row=0 />
</Grid>
This way, the Menu occupies the entire top row, and will consume 10% of the vertical space in the window regardless of resizing. There are some edge cases, obviously, particularly when controls get resized to the point where the text they contain cannot be seen anymore - if these are concerns you should use MinHeight and MinWidth on your Window or a specific control in order to provide a floor at which the control in question doesn't shrink anymore.
Note that, if you don't explicitly set the size of the Grid, it fills the entirety of its parent container by default - the entirety of the Window in this case. If you want your application to look the same, you can't give the parent Grid an absolute size like 800x480.
Imagine this. I've got a Border which contains some custom wpf control, lets call it MyControl. This Border stretches itself when window is resized (to fill available space). MyControl size is fixed. Now, I want my control to have HorizontalAlignment="Center" when it fits the available space, and HorizontalAlignment="Left" when it doesn't. I'm having trouble figuring out how to implement such behaviour though.
I guess, i can subscribe to Border's SizeChanged event and change alignment in code-behind depending on ActualWidths of Border and MyControl, but isn't there an easier way? Can this be achieved by databinding or by attached behaviour?
It will automatically behave like that if you set the control's Width and Height to fixed values and HorizontalAlignment and VerticalAlignment to Stretch instead of Center:
<Border BorderBrush="Red" BorderThickness="5">
<my:MyControl Width="200" Height="150"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Border>
I want to have a WPF-Window that is shaped like an image. So basically I have an image that contains transparency and at the transparent places I just want to see through the window to my desktop. In the non-transparent places I want to see my image. Similar to what is done here, but in a way that is simple and understandable(in the example I linked there is LOTS of XAML and I don't understand a word).
Much of the XAML you see in that example is stuff unrelated to just showing a window that only shows the image. The rest of it is basically handling the minimize/maximize/close buttons.
To get you started, the below is all you really need to show a window that just has your image. You can then go from here and add buttons and things as needed, using that example XAML from the article to lead you on.
<Window x:Class="CSWPFIrregularShapeWindow.PictureBasedWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="PictureBasedWindow" Height="300" Width="300" Background="Transparent"
WindowStyle="None" AllowsTransparency="True" >
<Grid>
<Image Height="250" Name="test" Source="/CSWPFIrregularShapeWindow;component/Images/transparentPic.png"
Stretch="Fill" />
</Grid>
</Window>
I have simple canvas with items and i need to add for scroll view as parent for my canvas.
But i fased with problem that after set
canvas.RenderTransform=new ScaleTransform(){...}
Scroolbars not appears or working not correctly.
Will be glad for any information.
The render transform occurs much later in the UI rendering process. It ultimately performs a matrix transform on controls rendering. The scroll viewer will be completely unware of this transform, its scrollbars will be based on the un-transformed size of the original Canvas.
The silverlight toolkit contains a LayoutTransformer control. This control applies a transform to its content as part of the layout process and reports the post-transform size as its desired size.
Consider this:-
<ScrollViewer Width="200" Height="200" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<toolkit:LayoutTransformer>
<toolkit:LayoutTransformer.LayoutTransform>
<ScaleTransform ScaleX="2" ScaleY="2" />
</toolkit:LayoutTransformer.LayoutTransform>
<Canvas Width="150" Height="150" Background="Aquamarine">
<Rectangle Fill="Blue" Canvas.Top="10" Canvas.Left="10" Width="30" Height="30" />
</Canvas>
</toolkit:LayoutTransformer>
</ScrollViewer>
Whilst the Canvas has a size (150) smaller than the containing scroll viewer (200), it is scaled so that it would be larger (300). The LayoutTransformer reports its desired size as 300, the post-transform size of the canvas. Hence the ScrollViewer displays scroll bars to accomodate it. Without the benefit of the LayoutTransformer the ScrollViewer would only see the Canvas as having a size 150 despite any applied RenderTransform.
I have a Viewbox with Stretch=Uniform in order to not distort the content.
However, when the frame window is wider or taller than the content, the Viewbox content is always centered.
I cannot seem to find any content alignment options on the Viewbox.
Is there a way to do this?
Try VerticalAlignment="Top" and HorizontalAlignment="Left" on your viewbox. It will cause it to be anchored to the top and left side.
<Grid>
<Viewbox VerticalAlignment="Top" HorizontalAlignment="Left">
...
</Viewbox>
</Grid>
If you want it to completely fill (but keep it uniform) you can use Stretch="UniformToFill"
According to MSDN the Viewbox is used to stretch the child elements. Since the child elements would be stretched, you would have to set the content alignment of the children.
You may want to look at this for more information on the Viewbox: How do I keep aspect ratio on scalable, scrollable content in WPF?