I'm new in WPF, implementing the application using MVVM pattern.
Border is container which contain path and textblock. textblock contain number.
Width and height of border control binded with viewmodel property.
want to show textblock contain i.e. number in middle of border container and path object on left top side of border container.
how to set the position of textblock in middle of border control.
<Border BorderThickness="5" BorderBrush="#FF30333A" Width="{Binding Width}" Background="#FF1C2125"
Height="{Binding Height}"
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Path Name="starPath" Fill="Gray" Data="M 9,0 L 7,6 L 0,6 L 6,11 L 4,17 L 9,12 L 14,17 L 12,11 L 18,6 L 11,6 L 9,0">
</Path>
<TextBlock Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="1" Text="2" VerticalAlignment="Center" HorizontalAlignment="Right" FontSize="20" Foreground="White" Background="Gray">
</TextBlock>
</Grid>
</Border>
Try this :
<Border BorderThickness="5" BorderBrush="#FF30333A" Width="{Binding Width}" background="#FF1C2125" Height="{Binding Height}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Path Grid.Row="0" HorizontalAlignment="Left" Name="starPath" Fill="Gray" Data="M 9,0 L 7,6 L 0,6 L 6,11 L 4,17 L 9,12 L 14,17 L 12,11 L 18,6 L 11,6 L 9,0"/>
<TextBloc Grid.Row="1" Text="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="20"/>
</Grid>
</Border>
So ? does it works ?
Related
I am developing an application and trying to achieve a sort of flip effect(like flipboard)
this is my xaml.
<Page.Resources>
<Storyboard x:Name="FlipBottomStoryboard">
<DoubleAnimation Duration="0:0:1.1" To="-80.9" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
</Storyboard>
</Page.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Grid Grid.RowSpan="2">
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle Stroke="Black" Fill="#FF4E608F"/>
</Grid>
<Grid x:Name="grid" Grid.Row="2" Grid.RowSpan="2" Canvas.ZIndex="1">
<Grid.Projection>
<PlaneProjection CenterOfRotationX="0" CenterOfRotationY="0"/>
</Grid.Projection>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Tapped">
<Media:ControlStoryboardAction Storyboard="{StaticResource FlipBottomStoryboard}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<Rectangle Fill="#FF3DDA24" Stroke="Black" Grid.Row="1"/>
</Grid>
<Rectangle Stroke="Black" Grid.Row="1" Grid.RowSpan="2">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FFA65757"/>
<GradientStop Color="#FF0A2E26" Offset="0.966"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
In short the grid on the lower half animates its RotationX when it is tapped.
The problem is that on the emulator(WVGA 4 inch 512mb) this works well but on the device (lumia 630 512mb) the animation jumps from the initial position to the end. Also the framerate drops to 30.
Any help is welcome on the matter
In a windows phone 8.1 runtime app I need to crop an image using a circle, to doing this i have used this code:
<Ellipse x:Name="ellipse" Stroke="White" StrokeThickness="1" StrokeDashArray="3,3" Height="300" Width="300" Canvas.ZIndex="1" VerticalAlignment="Center" HorizontalAlignment="Center" >
<Ellipse.Fill>
<ImageBrush Stretch="UniformToFill" ImageSource="{Binding Source, ElementName=image}"/>
</Ellipse.Fill>
</Ellipse>
<Grid Background="Black" >
<Image x:Name="image" Source="ms-appx:///Assets/avatar.png" VerticalAlignment="Center" Stretch="UniformToFill" HorizontalAlignment="Center" Height="300" Opacity="0.5" />
</Grid>
this is the result:
for render the ellipse i use this code:
var bitmap = new RenderTargetBitmap();
await bitmap.RenderAsync(ellipse);
I have to let the user translate and zoom this image, how can i manipulate those 2 images in a way that they looks one image?
Ok so after variour research and various test this is the solution to my problem.
With tis code you can handle full manipulation event including rotation zoom and translation!
XAML:
<Grid x:Name="LayoutRoot" Background="Black">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1" x:Name="ContentRoot" RenderTransformOrigin="0.5,0.5" Opacity="0.5" >
<Image x:Name="Image" Source="ms-appx:///Assets/AccountManagement/avatar.png" VerticalAlignment="Center" Stretch="UniformToFill" ScrollViewer.HorizontalScrollBarVisibility="Visible" HorizontalAlignment="Center" Height="300" RenderTransformOrigin="0.5,0.5" >
<Image.RenderTransform>
<CompositeTransform x:Name="ImageCompositeTransform" Rotation="0" TranslateX="0" TranslateY="0" ScaleX="1" ScaleY="1" />
</Image.RenderTransform>
</Image>
</Grid>
<Ellipse ManipulationDelta="Ellipse_ManipulationDelta" x:Name="Ellipse" Stroke="White" StrokeThickness="1" StrokeDashArray="3,3" Height="300" Width="300" Canvas.ZIndex="1" Margin="0" Grid.Row="1" VerticalAlignment="Center" d:LayoutOverrides="Height" HorizontalAlignment="Center" ManipulationMode="All" RenderTransformOrigin="0.5,0.5" >
<Ellipse.Fill>
<ImageBrush Stretch="UniformToFill" ImageSource="{Binding Source, ElementName=Image}">
<ImageBrush.Transform>
<CompositeTransform CenterX="150" CenterY="150" ScaleX="{Binding ScaleX, ElementName=ImageCompositeTransform}" ScaleY="{Binding ScaleY, ElementName=ImageCompositeTransform}" TranslateX="{Binding TranslateX, ElementName=ImageCompositeTransform}" TranslateY="{Binding TranslateY, ElementName=ImageCompositeTransform}" Rotation="{Binding Rotation, ElementName=ImageCompositeTransform}" />
</ImageBrush.Transform>
</ImageBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
C#:
private void Ellipse_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
ImageCompositeTransform.ScaleX *= e.Delta.Scale;
ImageCompositeTransform.ScaleY *= e.Delta.Scale;
ImageCompositeTransform.Rotation += e.Delta.Rotation / Math.PI;
ImageCompositeTransform.TranslateX += e.Delta.Translation.X;
ImageCompositeTransform.TranslateY += e.Delta.Translation.Y;
}
I have a scrollviewer with an item template on it. the user sends a control number and I need to scroll to that item. How can I find the offset for the scrollviewer?
here is the scrollviewer that I am using
<ScrollViewer Grid.Row="0" x:Name="ScrollPanel" Padding="0">
<Grid x:Name="TestPanel" >
<ItemsControl x:Name="MainItemsControl" ItemsSource="{Binding PostList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="PostPanel" Margin="0,5,0,5">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image x:Name="IconUrl" Source="{Binding IconUrl}" Grid.Row="0" Grid.Column="0" Margin="12,0,12,0" VerticalAlignment="Center" HorizontalAlignment="Center" Width="50"/>
<StackPanel Grid.Row="0" Grid.Column="1">
<TextBlock x:Name="PostAuthorName" Text="{Binding PostAuthorName}" TextWrapping="NoWrap" Margin="12,0,12,0" Foreground="Black" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PostTime" Text="{Binding PostTime}" TextWrapping="NoWrap" Margin="12,0,12,0" Foreground="Black" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
<TextBlock x:Name="ReplyNumber" Text="{Binding ReplyNumber}" Grid.Row="0" Grid.Column="2" TextWrapping="NoWrap" Foreground="Black" Margin="12,0,12,0" Style="{StaticResource PhoneTextNormalStyle}" VerticalAlignment="Center"/>
</Grid>
<RichTextBox x:Name="PostContent" localcontrols:Properties.BBCode="{Binding PostContent}" />
<Rectangle Grid.Row="1" Fill="Gray" Height="1" HorizontalAlignment="Stretch" Margin="0,10,0,10"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</ScrollViewer>
The offset can be calculated in this way. The code is adopted from this answer.
void ScrollToIndex(int index)
{
var itemContainer = MainItemsControl.ItemContainerGenerator.ContainerFromIndex(index) as UIElement;
GeneralTransform transform = itemContainer.TransformToVisual(ScrollPanel);
Point position = transform.Transform(new Point(0, 0));
ScrollPanel.ScrollToVerticalOffset(position.Y);
}
The ItemsControl does not implement logic that allows scrolling to a particular item. You can use the ListBox control instead. This control has a ScrollIntoView method that accepts the object you would like to scroll to as an argument. You can still use the RadWrapPanel by setting the ItemsPanel property of the ListBox control.
You don't have properties, but you have two methods for this: ScrollToVerticalOffset (to scroll vertically) and ScrollToHorizontalOffset (to scroll horizontally).
this.scrollViewer2.ScrollToVerticalOffset(0);
<StackPanel x:Name="LayoutRoot" Background="Transparent" >
<TextBlock Margin="20,20,0,0" Text="Type Text Here" HorizontalAlignment="Left"/>
<TextBox x:Name="SearchTextBox" IsReadOnly="False" HorizontalAlignment="Left" Margin="20,5,0,0" Height="70" Width="400" dp:TextBoxOnTextChangedDependency.UpdateSourceOnChange="True" Text="{Binding SearchBoxText, Mode=TwoWay}" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<cmd:EventToCommand PassEventArgsToCommand="True"
Command="{Binding ElementName=SearchTextBox, Path=DataContext.SearchTextBox_TextChangedCommand}"
/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
<Grid x:Name="LayoutList" Background="{StaticResource PhoneChromeBrush}">
<toolkit:LongListMultiSelector x:Name="treksLocationItems" Background="Transparent"
ItemsSource="{Binding Path=TreksLocationItems}">
<toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<Grid Margin="0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Width="110" Height="150" Source="{Binding PictureFilename}" VerticalAlignment="Top"/>
<StackPanel Grid.Column="1" VerticalAlignment="Top">
<TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="12,-12,12,6"/>
<TextBlock Text="{Binding ShortDescription}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Address:" Style="{StaticResource PhoneTextSmallStyle}"/>
<TextBlock Text="{Binding Path=StreetName}" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Site:" Style="{StaticResource PhoneTextSmallStyle}"/>
<TextBlock Text="{Binding Path=Website}" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
</StackPanel>
</StackPanel>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand Command="{Binding Path=DataContext.TapCommand, ElementName=searchItems}" CommandParameter="{Binding Path=Id}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Grid>
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>
</toolkit:LongListMultiSelector>
</Grid>
</StackPanel>
I have this code in XAML, a textbox for search and a multi line select list. The problem is that the multiLineList is not scrollable even if there are many items. If I remove the stackpanel and the textblock and textbox, the list works ok with scroll enabled. Any suggestion?
Try adding a ScrollViewer above your grid.
<ScrollViewer>
<Grid x:Name="LayoutList" ....>
...
</Grid>
</ScrollViewer>
Or you could probably replace your Grid with a ScrollViewer if you're not using it to position your elements.
Wraping LLMS in a ScrollViewer will destroy the item virtualization and throw an OutOfMemoryException if the collection is too long.
Expose the LLMS' inner LongListSelector, then use the ScrollTo() method to scroll to the item u want.
LongListMultiSelector llms = LongListMultiSelector as LongListMultiSelector;
if (llms != null && llms.ItemsSource.Count > 0)
{
llms.InnerLongListSelector.ScrollTo(llms.ItemsSource[llms.ItemsSource.Count - 1]);
}
I've encountered this weird issue and found an easy solution.
It happens for both Longlistselector and LonglistMultiselector.
When you have several controls in one page, you need to set the height of selector's row to "*" instead of "Auto" in order to make the scrolling function to work correctly.
For example :
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/> //Row def for another row
<RowDefinition Height="*"/> //Row def for your selector
</Grid.RowDefinitions>
If the RowDefinition Height not set to "*" but "Auto", scrolling for Longlistselector will not response to user's action.
I've got a table and it's looking alike that:
First I don't know how can I make such-structured stable, because all that I found in usual Grids is Columns and Rows so I need some "smarter" table element. But maybe I need to create it somehow. Maybe there are some solutions for making custom structured tables?
And the main trouble is make table fully stretchable (like a picture), So table must became bigger with text (Font) in it. I don't know target platform resolution but it can be really huge so table must have an ability to stretch like a picture but with good quality, I don't want to see big pixels there (so it must be stretchable like a vector picture). How can I realize it?
Also I'm still thinking if WPF is correct instrument for it. Maybe it will be easier to make it with Silverligh or put HTML into application somehow but for a moment I can't find way how can I make it everywhere. So I think I must as well tag the question with html and silver-light flags but I think I will use .net to get my data from database anyway.
I spend the last hour to find a reliable solution, but got not a perfect one.. I stop searching on this point but want to show you my current attempt:
GridControl.cs
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace WpfApplication1.CustomControl
{
public class GridControl : Grid
{
static GridControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(GridControl),
new FrameworkPropertyMetadata(typeof(GridControl)));
}
private Pen _linesPen;
#region Properties
public bool ShowCustomGridLines
{
get { return (bool) GetValue(ShowCustomGridLinesProperty); }
set { SetValue(ShowCustomGridLinesProperty, value); }
}
public static readonly DependencyProperty ShowCustomGridLinesProperty =
DependencyProperty.Register("ShowCustomGridLines", typeof (bool), typeof (GridControl),
new UIPropertyMetadata(false));
public Brush GridLineBrush
{
get { return (Brush) GetValue(GridLineBrushProperty); }
set { SetValue(GridLineBrushProperty, value); }
}
public static readonly DependencyProperty GridLineBrushProperty =
DependencyProperty.Register("GridLineBrush", typeof (Brush), typeof (GridControl),
new UIPropertyMetadata(Brushes.Black));
public double GridLineThickness
{
get { return (double) GetValue(GridLineThicknessProperty); }
set { SetValue(GridLineThicknessProperty, value); }
}
public static readonly DependencyProperty GridLineThicknessProperty =
DependencyProperty.Register("GridLineThickness", typeof (double), typeof (GridControl),
new UIPropertyMetadata(1.0));
#endregion
protected override void OnRender(DrawingContext dc)
{
if (ShowCustomGridLines)
{
if (_linesPen == null)
{
_linesPen = new Pen(GridLineBrush, GridLineThickness);
}
foreach (var rowDefinition in RowDefinitions)
{
dc.DrawLine(_linesPen, new Point(0, rowDefinition.Offset),
new Point(ActualWidth, rowDefinition.Offset));
}
foreach (var columnDefinition in ColumnDefinitions)
{
dc.DrawLine(_linesPen, new Point(columnDefinition.Offset, 0),
new Point(columnDefinition.Offset, ActualHeight));
}
dc.DrawRectangle(Brushes.Transparent, _linesPen,
new Rect(0, 0, ActualWidth, ActualHeight));
}
base.OnRender(dc);
}
}
}
Using in a view:
<Window x:Class="WpfApplication1.table"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:CustomControl="clr-namespace:WpfApplication1.CustomControl" Title="table" Height="500" Width="600">
<Grid>
<TextBlock Text="Headline" HorizontalAlignment="Center" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" />
<Slider x:Name="slider" Grid.Row="1" Minimum="1" Margin="20,30,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="200" />
<TextBlock Text="Zoom" Margin="250,33,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
<ScrollViewer x:Name="ScrollViewer" Margin="20,70,20,10" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<CustomControl:GridControl ShowCustomGridLines="True" Width="{Binding ElementName=ScrollViewer, Path=ActualWidth}" Height="{Binding ElementName=ScrollViewer, Path=ActualHeight}">
<Grid.LayoutTransform>
<ScaleTransform CenterX="0" CenterY="0" ScaleY="{Binding Path=Value, ElementName=slider}" ScaleX="{Binding Path=Value, ElementName=slider}" />
</Grid.LayoutTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Header 1" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBlock Grid.Column="1" Grid.Row="0" Text="Header 2" VerticalAlignment="Center" HorizontalAlignment="Center" />
<CustomControl:GridControl ShowCustomGridLines="True" Grid.Column="2" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- first row -->
<TextBlock Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Header 3 (over 3 columns)" />
<!-- first column in second row -->
<TextBlock Grid.Column="0" Grid.Row="1" Text="Cell 1" HorizontalAlignment="Center" VerticalAlignment="Center" />
<!-- second column in second row -->
<TextBlock Grid.Column="1" Grid.Row="1" Text="Cell 2" HorizontalAlignment="Center" VerticalAlignment="Center" />
<!-- third column in second row -->
<TextBlock Grid.Column="2" Grid.Row="1" Text="Cell 3" HorizontalAlignment="Center" VerticalAlignment="Center" />
</CustomControl:GridControl>
<TextBlock Grid.Column="0" Grid.Row="1" Text="Cell 1 (big)" HorizontalAlignment="Center" VerticalAlignment="Center" />
<CustomControl:GridControl Grid.Column="1" Grid.Row="1" ShowCustomGridLines="True">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<CustomControl:GridControl ShowCustomGridLines="True" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
</CustomControl:GridControl>
<CustomControl:GridControl ShowCustomGridLines="True" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
</CustomControl:GridControl>
</CustomControl:GridControl>
<CustomControl:GridControl ShowCustomGridLines="True" Grid.Column="2" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<CustomControl:GridControl ShowCustomGridLines="True" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
</CustomControl:GridControl>
<CustomControl:GridControl ShowCustomGridLines="True" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
</CustomControl:GridControl>
</CustomControl:GridControl>
</CustomControl:GridControl>
</ScrollViewer>
</Grid>
</Window>
Most people, when faced with having to create a complex grid like this would probably purchase a third party component. Especially if you do not know how to implement it yourself!
Try looking round the .NET component vendors such as:
Syncfusion
Telerik
Infragistics
Dev Express
Component One
Xceed
All have grids that are quite feature-rich. Also, if you are paying for their product, they should be happy to provide support.
Despite all the complexity behind the grid/table structure you're trying to achieve, the answer to your question is simple. Put everything in a Viewbox and it will properly stretch. Since WPF is based on vector graphics, not pixels, scaling will be no issue.