Currently when I making the UI, I set all the margin and size of the control to a fixed size according to the screen size. Is there some way adjust the size or margin dynamically proportionally to the screen size so there's no need to set the property in the XAML every time.
My current knowledge tells me that I could set the fixed width & height in style or template or in every layout which was used.
I would say re-think your approach. Instead of absolutely positioning your elements using margins, use the correct panel so elements correctly re-position and stretch themselves depending on the size of the container.
There are many panels in WPF supporting different layouts for automatically laying out your elements dynamically, e.g. StackPanel for stacking, WrapPanel for wrapping, see the overview of panels here: http://msdn.microsoft.com/en-us/library/ms754152(v=vs.110).aspx
e.g.
instead of:
<Grid>
<Label Content="Name:" Margin="92,320,0,0"/>
<TextBox Text="enter your name..." Margin="124,320,0,0"/>
</Grid>
use:
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Content="Name:" Grid.Column="0"/>
<TextBox Text="enter your name..." Grid.Column="1"/>
</Grid>
Then use Margin for giving the element space, not position, e.g. a margin of 5.
Not sure if this is what you are looking for. But I what I do is set the size of my master window to be 80% of the client monitor size.
public void SetPage(Page currentPage)
{
currentPage.Tag = this; //Set the new page's Tag to 'this' so we can reference it from within.
_mainFrame.Navigate(currentPage);
double height = System.Windows.SystemParameters.PrimaryScreenHeight;
double width = System.Windows.SystemParameters.PrimaryScreenWidth;
//set the size of the window to 80% of the client monitor
this.Height = (80.0 / 100.0) * height;
this.Width = (80.0 / 100.0) * width;
WindowStartupLocation = System.Windows.WindowStartupLocation.CenterScreen;
}
Related
Look at example:
<Grid VerticalAlignment="Top" Background="Yellow">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="textBlock"/>
<Button Grid.Column="1">
<Viewbox>
<Path Height="100" Width="100" Fill="Black" Data="M 0,0 H 100 V 100 H 0 Z" />
</Viewbox>
</Button>
</Grid>
Here is a button with vector graphics and I want it to be as small as it needs to be (restrict vector graphics from exploding).
Here is how it looks like and how I want it to be:
There are several possible solutions how to overcome the problem, to list few:
By binding Width/Height to some other element (this has issues with designer):
...
<Button Height="{Binding ActualHeight, ElementName=textBlock}" ...>
...
This is often used together with the ghost: special invisible element used by others (have no relationship with it) to layout themselves.
By hosting element inside Canvas (which is magical container), but then Canvas itself require layouting.
You can try putting Button inside Canvas. This will cause parent Grid only take height of TextBlock, but then there is another problem: how to position (layout) Canvas itself, so that its children are layout properly, kek.
In example above I don't actually want TextBlock to be a sister of Button, they could overlap (you wouldn't want the button to be hidden if available size is not enough, it should rather overlap something less important), I just want them to have same parent (if it moves - children will move). Confused? Look here:
<Grid>
<TextBlock ... />
<Button HorizontalAlignment="Right" ... />
</Grid>
This layout has same problems and can be solved similarly.
Now try to abstract from concrete examples above.
What I actually want: is to learn how to exclude element from layout of container. Like if element is collapsed, so the parent container will measure children sizes (except this element), layout children and then, after layouting is finished, element suddenly become visible and is restricted by parent container, while can use various alignments.
Does it make sense what I am asking? Maybe custom container is the way? Or do I miss something existing and obvious?
If you want to constrain the Path by the size of the described geometry, it's as simple as setting StretchDirection="DownOnly" on the Viewbox.
If you truly want it to request no vertical space of its own, and have its height determined by its layout 'neighbors' (in this case, the TextBlock), then you'll need to wrap it in a custom layout container. But you can't simply exclude it from layout--at least not completely. If you did, the element would always end up with zero width and height. Instead, you can measure in two passes, with the first pass requesting a child height of zero, and the second pass basing the requested size on the arrange size given after the first pass.
I think the container below will give you what you want, but be warned that I haven't tested it thoroughly. Use at your own risk.
public class ZeroHeightDecorator : Border
{
private Size _lastSize;
private Size _idealSize;
protected override void OnVisualChildrenChanged(DependencyObject added, DependencyObject removed)
{
base.OnVisualChildrenChanged(added, removed);
_idealSize = new Size();
_lastSize = new Size();
}
protected override Size MeasureOverride(Size constraint)
{
var child = this.Child;
if (child == null)
return new Size();
if (child.IsMeasureValid)
child.Measure(new Size(Math.Max(_lastSize.Width, constraint.Width), _lastSize.Height));
else
child.Measure(new Size(constraint.Width, 0d));
_idealSize = child.DesiredSize;
return new Size(_idealSize.Width, 0d);
}
protected override Size ArrangeOverride(Size arrangeSize)
{
var child = this.Child;
if (child != null)
{
if (arrangeSize != _lastSize)
{
// Our parent will assume our measure is the same if the last
// arrange bounds are still available, so force a reevaluation.
this.InvalidateMeasure();
}
child.Arrange(new Rect(arrangeSize));
}
_lastSize = arrangeSize;
return arrangeSize;
}
}
A more flexible container would allow you to specify which dimension(s) to minimize: Width , Height, or Neither, or Both. Feel free to extend it :).
Example in action:
<Grid VerticalAlignment="Top" Background="Yellow">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="textBlock" />
<t:ZeroHeightDecorator Grid.Column="1">
<Button>
<Viewbox>
<Path Fill="Black" Data="M 0,0 H 100 V 100 H 0 Z" />
</Viewbox>
</Button>
</t:ZeroHeightDecorator>
</Grid>
I'm currently trying to display a Dictionary (which is held in a Dictionary itself).
I started at first using a UniformGrid as ItemsPanelTemplate, but realized pretty fast, the items to display can have individual heights.
I've got so far, that I can display all content using the UniformGrid, but can't seem to get it working using a Grid or StackPanel as ItemsPanelTemplate.
The code below is working fine with the downside that each Operation-block is given the same height though their height can be variable.
After given some thought I came to the conclusion that a StackPanel would be best to use, as the Operations would be shown bleow each other taking the height they needed. But when I tried, I relaized they take only a fraction of the ListView's height.
Worth to mention:
The Operation-UserControl in itself does evaluate its height and build its layout accordingly. So it doesn't take the space needed to display all content, but displays the content which does fit in the available space.
So how can I achieve that the ListViewItems (=operations) take the ListView's full height?
EDIT: clarification
if the described behaviour isn't possible with any above mentioned control, but any other could provide the needed funtionality, let me know...
EDIT2: some examples
Total available space: 500
No Scrollbar.
Sidenote: there is no maxItemLimit, but it's highly unlikely that the ItemCount would exceed 10.
Given 1 item: (needed space to display all content 300)
This single item would take 300.
Given 2 items: (these would need 150 and 200 of space)
Both items would be displayed in there full size: 150, 200.
(Presumably only working with a StackPanel.)
Given 10 items:
Those 10 would be squeezed equally or relative to full-desired size in the 500 (so 50 per item).
Both behaviours would be fine.
UniformGrid vs StackPanel
<UserControl x:Name="vDay" x:Class="RefServiceClient.Day"
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"
xmlns:local="clr-namespace:RefServiceClient"
mc:Ignorable="d"
d:DesignHeight="60" d:DesignWidth="120"
MinHeight="40">
<Grid x:Name="gridDay"
Width="{Binding ActualWidth, ElementName=vDay, Mode=OneWay}"
Height="{Binding ActualHeight, ElementName=vDay, Mode=OneWay}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="DayHeader" Grid.Row="0">
<!--containing header info: several textboxes, which are irrelevant for the question-->
<TextBox x:Name="dayShortname"
Grid.Row="0" Grid.Column="1"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
Margin="1"
Text="{Binding Path=Value.DayShortname}"/>
</Grid>
<ListView x:Name="operations" Grid.Row="1" Background="Aqua"
ItemsSource="{Binding Path=Value.OperationList}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<local:Operation Background="Crimson" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch"/>
<!--<local:Operation Background="Crimson" />-->
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<!--<Grid Grid.IsSharedSizeScope="True"/>-->
<!--<StackPanel/>-->
<!--<VirtualizingStackPanel Orientation="Vertical"/>-->
<UniformGrid Columns="1"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
You could create a custom panel that arranges your item according to your rules. Then you just have to design your items in a way that they display nicely for whatever size they are allowed to take.
A rough sketch of the panel could look as follows:
public class SqueezeStackPanel : Panel
{
protected override Size MeasureOverride(Size availableSize)
{
var desiredHeight = 0.0;
foreach (UIElement child in InternalChildren)
{
child.Measure(availableSize);
desiredHeight += child.DesiredSize.Height;
}
if (availableSize.Height < desiredHeight)
{
// we will never go out of bounds
return availableSize;
}
return new Size(availableSize.Width, desiredHeight);
}
protected override Size ArrangeOverride(Size finalSize)
{
// measure desired heights of children in case of unconstrained height
var size = MeasureOverride(new Size(finalSize.Width, double.PositiveInfinity));
var startHeight = 0.0;
var squeezeFactor = 1.0;
// adjust the desired item height to the available height
if (finalSize.Height < size.Height)
{
squeezeFactor = finalSize.Height / size.Height;
}
foreach (UIElement child in InternalChildren)
{
var allowedHeight = child.DesiredSize.Height * squeezeFactor;
var area = new Rect(new Point(0, startHeight), new Size(finalSize.Width, allowedHeight));
child.Arrange(area);
startHeight += allowedHeight;
}
return new Size(finalSize.Width, startHeight);
}
}
This panel can be used in the ItemsPanelTemplate of your ListView with disabled scrollbars.
It depends. I'll give you an options. First. Implement, let say, Boolean AttachedProperty, marking whether this particular instance should be of certain size. In case 0/1 is not sufficient, declare appropriate enumeration. Second. Extend existing StackPanel, override appropriate protected members. At least, MeasureOverride/ArrangeOverride. There you can read the value of corresponding attached property and decide how big or small it has to be. Does it sound like a solution? In case it does, I can provide some examples.
I am using a third party control called TimelineTool for WPF and on load i want the timeline to stretch the width of the Grid column i have specified.
This is how a Timeline row is used:
<tt:TimeLineControl Height="115"
ItemTemplate="{StaticResource UsedTemplateProperty}"
HorizontalAlignment="Left"
x:Name="TimeLine2"
UnitSize="20"
MinimumUnitWidth="20"
Background="Blue"
DrawTimeGrid="True"
MinWidth="300"
SynchedWithSiblings="True" d:IsHidden="True" />
As you can see a MinWidth is set here and also HorizontalAlign="Left".
In the C# code I am retreiveing the MinWidth property from this element and using it as a startup width.
double setWidth = MinWidth;
Is it possible to set the MinWidth to the value of HorizontalAlign="Stretch"?
I have a user control that shows a thumbnail and some text below it. The API I'm using returns a 480x360 letterboxed thumbnail. I'm trying to hide it so the user only sees the image without the two 45px tall bars on the top an bottom. Below are the dimensions of the thumbnail:
User Control xaml:
<Grid>
<Grid.RowDefinitions>
<RowDefinition x:Name="ThumbnailRow"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Image Source="..." Stretch="UniformToFill" VerticalAlignment="Center"/>
<Grid Grid.Row="1" Background="Gray">
<TextBlock Padding="24" Text="..." HorizontalAlignment="Left"/>
</Grid>
</Grid>
In my codebehind, I tried to modify the height of ThumbnailViewRow to hide the black bars:
private double GetScreenWidth()
{
double scaleFactor = DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;
double width = scaleFactor * Window.Current.Bounds.Width;
return width;
}
private double GetAdjustedThumbnailRowHeight()
{
// 38 represents 19px left & right margins in ListView
double adjustedWidth = GetScreenWidth() - 38;
double projectedHeight = (360 * adjustedWidth) / 480;
// in a full 480x360 image, I would need to shave 45 px from the top
// and bottom. In some resolutions, the image is scaled so I have
// to find the proportionate amount to trim
double toTrim = (projectedHeight * 90) / 360;
return projectedHeight - toTrim;
}
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
ThumbnailViewRow.Height = new GridLength(GetAdjustedThumbnailRowHeight());
}
The above code only slightly works; a large portion of the bars are still visible on both ends. On a 480x800 device, I was able to tweak some numbers to get the thumbnail to display correctly. The fix in that case was to multiply toTrim by 1.55 but I have no clue how well this would work out on devices with other resolutions. I don't have another device to test nor a WP emulator.
Could the reason for this problem be an embarrassing math mistake, or a subtlety in the way XAML works? How can I get my approach to work properly in different resolutions?
Here's a quick working example I made in WPF. (Note the explicitly-set height and width).
<Grid Margin="0, 30, 0, 0">
<Grid.RowDefinitions>
<!-- 360 - 45 - 45 = 270 -->
<RowDefinition Height="270"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Image Source="..." VerticalAlignment="Center" Width="480" Stretch="UniformToFill"/>
</Grid>
Use the Clip Property of the Image like so
<Image x:Name="myimage" Stretch="None" Source="/Assets/my_image.jpg">
<Image.Clip>
<RectangleGeometry Rect="0, 45, 480, 435"></RectangleGeometry>
</Image.Clip>
</Image>
RECT is the rectangle section of the image you want to be visible.
Is it any way to fill available width / height with image in xaml?
I need something like UniformToFill, but where I can control stretch direction (width or height)
Assume I have have following code:
<UniformGrid Columns="2" Rows="2">
<Image Source="Desert1.jpg" Stretch="Uniform"/> //
<Image Source="Desert2.jpg" Stretch="UniformToFill"/> //
<Image Source="Desert3.jpg" />
<Image Source="Desert4.jpg" />
</UniformGrid>
EDIT:
for examle (width): if image is half as wide as I want to show, I don't care about height and just scale x2 image height and width. So image must fit width, and don't care about height. It's desired behaviour, but if it's not possible - ok. So you can rethink question as IF it possible, HOW can I do it in xaml.
Also all images may have different width and height
I think that you might be able to get the effect you desire in certain conditions. If your images are all bigger than the size that they will be displayed, you could possibly use this:
<Image Source="Desert.jpg" Stretch="UniformToFill" StretchDirection="DownOnly" />
A ViewBox has the same Stretch properties as an Image and there is a good example of the differences between the different combinations in the How to: Apply Stretch Properties to the Contents of a Viewbox article on MSDN.
This might be what you are looking for...
TransformedBitmap
Here is a static method I made in an ImageUtility class.
public static TransformedBitmap GetScaledBitmapImageSprite(BitmapSource src, double x_scale, double y_scale)
{
return (new TransformedBitmap(src, new ScaleTransform(x_scale, y_scale)));
{
The x_scale and y_scale are doubles in the form of:
desired_width / original_width
Maybe a little different than what you are looking for but I think it can get you started on the right track.
You can store your TransformedBitmap in memory and apply new transforms through:
TransformedBitmap x = new TransformedBitmap();
x.Transform = new ScaleTransform(x,y);
You should use
<Image Source="{Binding Image}" Stretch="Fill"/>
like if you use Stretch="UnifrmtoFill" then it will change both length and width in a ratio or I say both together.
so if you use
Stretch="Fill", it gives you chance to change either height or width at a time whatever is changed.