I am trying to create a time scale like in Adobe Premiere like this:
But, I have to go to down to 0.01 second increments.
My timeline control looks like:
UPDATE:
I have used #Sten Petrov suggestion and used a VisualBrush.
But now I am stuck on how to implement the Label for the Seconds.
My new code (containing control can change):
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="680.839">
<Grid Background="Black">
<ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Visible" >
<ScrollViewer.ContentTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid SnapsToDevicePixels="False" UseLayoutRounding="True">
<Grid.Background>
<VisualBrush TileMode="Tile" Viewport="0,0,5,30" ViewportUnits="Absolute" Viewbox="0,0,5,30" ViewboxUnits="Absolute">
<VisualBrush.Visual>
<Line Stroke="Coral" StrokeThickness="2" X1="0" X2="0" Y1="25" Y2="30" UseLayoutRounding="True" />
</VisualBrush.Visual>
</VisualBrush>
</Grid.Background>
</Grid>
<Grid Margin="50,0,0,0" SnapsToDevicePixels="False" UseLayoutRounding="True">
<Grid.Background>
<VisualBrush TileMode="Tile" Viewport="0,0,50,30" ViewportUnits="Absolute" Viewbox="0,0,50,30" ViewboxUnits="Absolute">
<VisualBrush.Visual>
<Line Stroke="Red" StrokeThickness="2" X1="0" X2="0" Y1="20" Y2="30" UseLayoutRounding="True" />
</VisualBrush.Visual>
</VisualBrush>
</Grid.Background>
</Grid>
<Grid SnapsToDevicePixels="False" Height="30" UseLayoutRounding="True" >
<Grid.Background>
<VisualBrush TileMode="Tile" Viewport="0,0,500,30" ViewportUnits="Absolute" Viewbox="0,0,500,30" ViewboxUnits="Absolute">
<VisualBrush.Visual>
<Grid HorizontalAlignment="Left" Width="500" UseLayoutRounding="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="21*"/>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="9*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" FontFamily="Tahoma" FontSize="8" Padding="0" VerticalAlignment="Bottom" Grid.Column="1" Height="9" Content=".100" Foreground="White"/>
<Label Grid.Row="0" FontFamily="Tahoma" FontSize="8" Padding="0" VerticalAlignment="Bottom" Grid.Column="2" Height="9" Content=".200" Foreground="White"/>
<Label Grid.Row="0" FontFamily="Tahoma" FontSize="8" Padding="0" VerticalAlignment="Bottom" Grid.Column="3" Height="9" Content=".300" Foreground="White"/>
<Label Grid.Row="0" FontFamily="Tahoma" FontSize="8" Padding="0" VerticalAlignment="Bottom" Grid.Column="4" Height="9" Content=".400" Foreground="White"/>
<Label Grid.Row="0" FontFamily="Tahoma" FontSize="8" Padding="0" VerticalAlignment="Bottom" Grid.Column="5" Height="9" Content=".500" Foreground="White"/>
<Label Grid.Row="0" FontFamily="Tahoma" FontSize="8" Padding="0" VerticalAlignment="Bottom" Grid.Column="6" Height="9" Content=".600" Foreground="White"/>
<Label Grid.Row="0" FontFamily="Tahoma" FontSize="8" Padding="0" VerticalAlignment="Bottom" Grid.Column="7" Height="9" Content=".700" Foreground="White"/>
<Label Grid.Row="0" FontFamily="Tahoma" FontSize="8" Padding="0" VerticalAlignment="Bottom" Grid.Column="8" Height="9" Content=".800" Foreground="White"/>
<Label Grid.Row="0" FontFamily="Tahoma" FontSize="8" Padding="0" VerticalAlignment="Bottom" Grid.Column="9" Height="9" Content=".900" Foreground="White"/>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Grid.Background>
</Grid>
<Grid SnapsToDevicePixels="False" Height="30" UseLayoutRounding="True" Margin="500,0,0,0" >
<Grid.Background>
<VisualBrush TileMode="Tile" Viewport="0,0,500,30" ViewportUnits="Absolute" Viewbox="0,0,500,30" ViewboxUnits="Absolute">
<VisualBrush.Visual>
<Line Stroke="Blue" StrokeThickness="2" X1="0" X2="0" Y1="10" Y2="30" UseLayoutRounding="True" />
</VisualBrush.Visual>
</VisualBrush>
</Grid.Background>
</Grid>
<Grid SnapsToDevicePixels="False" Height="30" UseLayoutRounding="True" Margin="491,0,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="7"/>
<RowDefinition Height="23"/>
</Grid.RowDefinitions>
<!--Need something here-->
<Label Grid.Row="0" FontFamily="Tahoma" FontSize="8" Padding="0" VerticalAlignment="Bottom" Grid.Column="0" Height="9" Content="00:00" Foreground="White"/>
</Grid>
</Grid>
</DataTemplate>
</ScrollViewer.ContentTemplate>
</ScrollViewer>
</Grid>
/UPDATE
I go to 0.01 seconds per line, so for a 10 minute timeline I am looking at drawing 60000 lines + 6000 labels.
I asked a prior question on this before: 10000's+ UI elements, bind or draw?
Originally I was drawing lines directly on a Canvas.
Then I went to using a VisualHost because it is supposed to be lighter weight.
Well it isn't light enough.
I have a MediaElement that plays a video and the Timeline scrolls in sync with the video position. A ScrollViewer wraps my Timeline and does .ScrollToHorizontalOffset about every 10ms.
If my Timeline was over something like 3 minutes the video shutters.
I assume this is because a VisualHost still has all the Framework Elements in it and the scrolling causes them to be re-validated.
So now I am trying to generate a Image to display, I think that should be lighter yet.
Am I wrong in this assumption?
Now I am facing issues with making the Timeline into an Image.
I could not Render an entire Timeline to a Image so I am 'Chunking' it. I was hitting Exceptions about Image size being to big.
On to my code:
This is my main entry point.
public void RenderHeaderPicture()
{
const int ChunkSize = 5000;
var bitmapFrames = new List<BitmapFrame>();
// generates X number of DrawingVisual's based on ChunkSize
List<DrawingVisual> visuals = generateHeaderVisualChunks(
AppViewModel.TimelineViewModel.HeaderWidth, ChunkSize, TimelineViewModel.ViewLevel.Level1);
for (var i = 0; i < visuals.Count; i++)
{
var renderTargetBitmap = new RenderTargetBitmap(ChunkSize, 30, 96, 96, PixelFormats.Pbgra32);
renderTargetBitmap.Render(visuals[i]);
//test to make sure image good
saveHeaderSegmentAsPng(string.Format("headerSeg{0}.png", i), renderTargetBitmap);
bitmapFrames.Add(BitmapFrame.Create(renderTargetBitmap));
}
// put the frames back together now
var drawingVisual = new DrawingVisual();
using (var drawingContext = drawingVisual.RenderOpen())
{
for (int i = 0; i < bitmapFrames.Count; i++)
{
drawingContext.DrawImage(bitmapFrames[i], new Rect(i * ChunkSize, 0, bitmapFrames[i].PixelWidth, 30));
}
drawingContext.Close();
}
var newBmp = new RenderTargetBitmap(AppViewModel.TimelineViewModel.HeaderWidth, 30, 96, 96, PixelFormats.Pbgra32);
newBmp.Render(drawingVisual);
AppViewModel.TimelineViewModel.HeaderImageSource = newBmp;
}
Here is the code that creates the DrawingVisual's
private List<DrawingVisual> generateHeaderVisualChunks(int width, int chunkSize, TimelineViewModel.ViewLevel level)
{
var ret = new List<DrawingVisual>();
var currentTime = new TimeSpan(0, 0, 0, 0, 0);
var timeStep = new TimeSpan(0, 0, 0, 0, (int)level);
var currentLine = 0;
const double DistanceBetweenLines = 5;
const int TenthOfSecondLine = 10;
const int SecondLine = 100;
int iterations = (width / chunkSize);
int remainder = width % chunkSize; //not doing anything with yet
var grayBrush = new SolidColorBrush(Color.FromRgb(192, 192, 192));
var grayPen = new Pen(grayBrush, 2);
var whitePen = new Pen(Brushes.Purple, 2);
grayBrush.Freeze();
grayPen.Freeze();
whitePen.Freeze();
for (int i = 0; i < iterations; i++)
{
var visual = new DrawingVisual();
using (var dc = visual.RenderOpen())
{
double currentX = 0;
if (i > 0)
{
currentLine--;
currentTime -= timeStep;
}
while (currentX <= chunkSize)
{
if (((currentLine % SecondLine) == 0) && currentLine != 0)
{
dc.DrawLine(whitePen, new Point(currentX, 30), new Point(currentX, 15));
FormattedText text = null;
double tempX = currentX;
switch (level)
{
case TimelineViewModel.ViewLevel.Level1:
text = new FormattedText(
currentTime.ToString(#"hh\:mm\:ss\.fff"),
CultureInfo.CurrentCulture,
FlowDirection.LeftToRight,
new Typeface("Tahoma"),
8,
grayBrush);
break;
}
dc.DrawText(text, new Point((tempX - 22), 0));
}
else if ((((currentLine % TenthOfSecondLine) == 0) && currentLine != 0)
&& (currentLine % SecondLine) != 0)
{
dc.DrawLine(grayPen, new Point(currentX, 30), new Point(currentX, 20));
FormattedText text = null;
switch (level)
{
case TimelineViewModel.ViewLevel.Level1:
text = new FormattedText(
string.Format(".{0}", currentTime.Milliseconds),
CultureInfo.CurrentCulture,
FlowDirection.LeftToRight,
new Typeface("Tahoma"),
8,
grayBrush);
break;
}
dc.DrawText(text, new Point((currentX - 8), 8));
}
else
{
dc.DrawLine(grayPen, new Point(currentX, 30), new Point(currentX, 25));
}
currentX += DistanceBetweenLines;
currentLine++;
currentTime += timeStep;
}
}
ret.Add(visual);
}
return ret;
}
Save png segment:
private static void saveHeaderSegmentAsPng(string fileName, RenderTargetBitmap renderTargetBitmap)
{
var pngBitmapEncoder = new PngBitmapEncoder();
pngBitmapEncoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap));
using (var fileStream = new FileStream(fileName, FileMode.Create))
{
pngBitmapEncoder.Save(fileStream);
fileStream.Flush();
fileStream.Close();
}
}
All of my png segments are rendered correctly in their separate files.
And my Timeline is rendered correctly until I go over 1:20 then things break.
See:
It's like the Image is smeared or something.
Anyone know what is going on with this?
Thanks
I'm waiting for the day when my living room will have a TV with horizontal resolution that will require something like your approach.
Scrap this whole piece of code you just demoed here, it will never become usable and maintainable, you could only manage to squeeze one of these out of it.
Then learn about VisualBrush, there are plenty of tutorials out there, it can repeat your visual template, no need of PNGs and it will scale better when screen resolution changes (up to 40001px wide)
For the numbers that appear above the marks there are a million different approaches, some of them can be combined with the visual brush mentioned above, such as a user control that represents your timeline unit (the space between two larger marks). Now place several of them in a grid (stackpanel, canvas... as you wish) and adjust (dynamically) their offset and labels - all of a sudden you can represent an infinite timeline with 10 controls on the screen.
Related
I have to "export" a UserControl as an image, I've tried to use RenderTargetBitmap, but this outputs a black image. I tried online solution, but I seem to be missing something.
Here is my code:
UserControl usage :
<uc:ImageStatusBar x:Name="OverlayPanel" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Stretch"/>
UserControl code :
<UserControl x:Class="ImageViewer.Controls.ImageStatusBar"
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:ImageViewer.Controls"
xmlns:uc="clr-namespace:ImageViewer.Controls"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid x:Name="StatusbarGrid" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="8*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StatusBar x:Name="LeftSideStaticStatusBar" Grid.Column="0">
<StatusBar.Background>
<SolidColorBrush Color="White" Opacity="0.5"/>
</StatusBar.Background>
<StatusBarItem x:Name="Logo" Height="42" Width="42" HorizontalAlignment="Right" Padding="6,0,0,0">
<Image x:Name="LogoImage"></Image>
</StatusBarItem>
</StatusBar>
<StatusBar x:Name="StatusBar" ItemsSource="{Binding}" Grid.Column="1" Padding="6,0,0,0">
<StatusBar.Background>
<SolidColorBrush Color="White" Opacity="0.5"/>
</StatusBar.Background>
<StatusBar.ItemTemplate>
<DataTemplate>
<Border BorderThickness="4 0 4 0">
<uc:StatusBarItem HorizontalAlignment="Left"/>
</Border>
</DataTemplate>
</StatusBar.ItemTemplate>
</StatusBar>
<StatusBar x:Name="RightSideStaticStatusBar" Grid.Column="2">
<StatusBar.Background>
<SolidColorBrush Color="White" Opacity="0.5"></SolidColorBrush>
</StatusBar.Background>
<StatusBarItem x:Name="IntensityBarItem" HorizontalAlignment="Right" HorizontalContentAlignment="Stretch" Width="128">
<uc:IntensityBar x:Name="IntensityBarControl" ViewModel="{Binding}"/>
</StatusBarItem>
<StatusBarItem x:Name="ScaleBarItem" HorizontalAlignment="Right" HorizontalContentAlignment="Stretch" Width="100">
<uc:ScaleBar x:Name="ScaleBarControl" ViewModel="{Binding}"></uc:ScaleBar>
</StatusBarItem>
</StatusBar>
</Grid>
</UserControl>
And the code to Generate the image. For now it's a double click on the the actual UC as I yet in the "design" part of the functionality.
private void OverlayPanel_MouseDoubleClick(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
RenderTargetBitmap bitmap =
new RenderTargetBitmap((int)OverlayPanel.ActualWidth,
(int)OverlayPanel.ActualHeight,
96, 96, PixelFormats.Pbgra32);
bitmap.Render(OverlayPanel);
int width = bitmap.PixelWidth;
int height = bitmap.PixelHeight;
int componentsPerPixel = 4;
int totalPixels = width * height;
int totalBytes = totalPixels * componentsPerPixel;
byte[] rgbValues = new byte[totalBytes];
var pixels = new byte[bitmap.PixelWidth * bitmap.PixelHeight];
bitmap.CopyPixels(rgbValues, bitmap.PixelWidth * bitmap.Format.BitsPerPixel / 8, 0);
using (FileStream stream = File.Create(#"D:\image3.png"))
{
JpegBitmapEncoder encoder = new JpegBitmapEncoder();
encoder.QualityLevel = 90;
encoder.Frames.Add(BitmapFrame.Create(bitmap));
encoder.Save(stream);
// If you want to export the xamDataChart to a PNG
// instead of JPEG, use this code block:
// PngBitmapEncoder encoder = new PngBitmapEncoder();
// encoder.Frames.Add(BitmapFrame.Create(bitmap));
// encoder.Save(stream);
}
}
What I am missing here? Is this the proper solution, should I try and focus on creating the image from "scratch" using the text in the component?
Two more things to mention:
uc:IntensityBar <-- it's an other image
uc:ScaleBar <-- is a grid with some lines.
I'm not able to put my image and lines (the lines are drawn on top of the image) in the center of the 2nd column (the center column) of my grid. I always have lines and image left aligned...I almost tried everything (horizontalAlignment="center"...)
The code is the following:
<Page
x:Class="WhirlpoolSQC.DetailPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WhirlpoolSQC"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Top">
<TextBox x:Name="textBox" Text="Defects" Margin="0,11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="24" IsReadOnly="True"/>
</StackPanel>
<Canvas Grid.Column="1" >
<Image Name="image_detail" VerticalAlignment="Center" Width="840"/>
<Canvas VerticalAlignment="Center" Width="840" >
<Line
X1="280" Y1="0"
X2="280" Y2="630"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3" />
<Line
X1="560" Y1="0"
X2="560" Y2="630"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3" />
<Line
X1="0" Y1="210"
X2="840" Y2="210"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3"/>
<Line
X1="0" Y1="420"
X2="840" Y2="420"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3"/>
</Canvas>
</Canvas>
<StackPanel Grid.Column="2" VerticalAlignment="Top">
<TextBox x:Name="textBox2" Text="List of defecs" Margin="0,11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="24" IsReadOnly="True"/>
<ListView x:Name="listView" HorizontalAlignment="Stretch" Margin="0,61,10,0" BorderThickness="1,1,1,1" RequestedTheme="Default" BorderBrush="Black" VerticalAlignment="Top" Height="536"/>
</StackPanel>
</Grid>
Basically, I need something like:
Furthermore, I would like that the image auto fit inside the column in a way that it is not cutted when I put full-screen.
I don't understand wherte is the isse.
thanks
I played around your code and made some changes to get what's shown in your wireframe. The image will always stay in the center and will move or scale according to the window size.
Desktop View
Mobile or Tablet View
//MainPage.Xaml
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" SizeChanged="YourPage_SizeChanged"
x:Name="YourPage"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Padding="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" MaxWidth="200" />
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="1*" MaxWidth="200" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Top" Padding="20">
<TextBlock x:Name="textBox1" Text="List of Affects" Margin="0,11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="Blue" />
<ListView x:Name="listView1" HorizontalAlignment="Stretch" Margin="0,40,0,0" BorderThickness="1,1,1,1" RequestedTheme="Default" BorderBrush="Black" VerticalAlignment="Stretch" >
<ListViewItem>Item1</ListViewItem>
<ListViewItem>Item2</ListViewItem>
<ListViewItem>Item3</ListViewItem>
</ListView>
</StackPanel>
<Grid Grid.Column="1" Padding="0" VerticalAlignment="Center" Background="White" HorizontalAlignment="Center" >
<Image Name="image_detail" MaxWidth="840" Source="ms-appx:///Assets/1.jpg" />
<Line x:Name="Line1"
X1="280" Y1="0"
X2="280" Y2="630"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3" />
<Line x:Name="Line2"
X1="560" Y1="0"
X2="560" Y2="630"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3" />
<Line x:Name="Line3"
X1="0" Y1="210"
X2="840" Y2="210"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3"/>
<Line x:Name="Line4"
X1="0" Y1="420"
X2="840" Y2="420"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3"/>
</Grid>
<StackPanel Grid.Column="2" VerticalAlignment="Top" Padding="20">
<TextBlock x:Name="textBox2" Text="List of defects" Margin="0,11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="Blue" />
<ListView x:Name="listView2" HorizontalAlignment="Stretch" Margin="0,40,0,0" BorderThickness="1,1,1,1" RequestedTheme="Default" BorderBrush="Black" VerticalAlignment="Stretch" >
<ListViewItem>Item1</ListViewItem>
<ListViewItem>Item2</ListViewItem>
<ListViewItem>Item3</ListViewItem>
</ListView>
</StackPanel>
</Grid>
//MainPage.Xaml.cs
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void YourPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
try
{if (image_detail.ActualHeight > 0 && image_detail.ActualWidth > 0)
{
Line1.Y2 = image_detail.ActualHeight;
Line1.X1 = image_detail.ActualWidth / 3;
Line1.X2 = image_detail.ActualWidth / 3;
Line2.Y2 = image_detail.ActualHeight;
Line2.X1 = (image_detail.ActualWidth / 3) * 2;
Line2.X2 = (image_detail.ActualWidth / 3) * 2;
Line3.X2 = image_detail.ActualWidth;
Line3.Y1 = image_detail.ActualHeight / 3;
Line3.Y2 = image_detail.ActualHeight / 3;
Line4.X2 = image_detail.ActualWidth;
Line4.Y1 = (image_detail.ActualHeight / 3) * 2;
Line4.Y2 = (image_detail.ActualHeight / 3) * 2;
}
}
catch { }
}
}
At the past, I can convert and save an usercontrol to an JPEG image with this code:
private string CreateBitmapImage(FrameworkElement usefulData, string name) // Tekli görev kartını masaüstünde oluşturmak için, resim yaratma fonksiyonu.
{
try
{
string fullFileName = string.Empty;
Size size = new Size(642, 416);
usefulData.Measure(size);
usefulData.Arrange(new Rect(size));
var rtb = new RenderTargetBitmap((int)usefulData.ActualWidth, (int)usefulData.ActualHeight, 96, 96, PixelFormats.Pbgra32);
rtb.Render(usefulData);
var encoder = new JpegBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(rtb));
SaveFileDialog dlg = new SaveFileDialog();
dlg.Title = "Görev kartını nereye kaydetmek istersiniz ?";
dlg.FileName = name; // Default file name
dlg.DefaultExt = ".jpg"; // Default file extension
dlg.Filter = "Resim Dosyası (.jpg)|*.jpg"; // Filter files by extension
dlg.OverwritePrompt = true;
var result = dlg.ShowDialog();
if (result == true && dlg.CheckPathExists == true)
{
fullFileName = System.IO.Path.Combine(dlg.FileName);
using (var filestream = new FileStream(fullFileName, FileMode.Create))
{
encoder.Save(filestream);
}
}
return fullFileName;
}
catch
{
MessageBox.Show("Tek görev kartını yaratırken bir hata oluştu.Lütfen yeniden deneyin.", "Hata", MessageBoxButton.OK, MessageBoxImage.Error);
return "";
}
}
Now, I'm converting my WPF project to UWP. However, I cannot find how I convert and save an usercontrol to an Jpeg image in UWP. Can you help me please ?
Thanks.
Update: My UserControl in UWP. As I explained at bottom, I got an exception if I try render the user control:
<UserControl
x:Class="AYOS_IDPrinter_UWP.TaskCard"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AYOS_IDPrinter_UWP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="416"
d:DesignWidth="642" HorizontalAlignment="Center" VerticalAlignment="Center" RequestedTheme="Default">
<UserControl.Resources>
<SolidColorBrush x:Key="AuSupportColor" Color="#FFE5C97C"/>
</UserControl.Resources>
<Border x:Name="OutSketch" BorderThickness="2" BorderBrush="{StaticResource AuSupportColor}">
<Grid x:Name="MainGrid" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border x:Name="NeedleArea" BorderThickness="0,0,0,2" Background="{StaticResource AUColor}" BorderBrush="{StaticResource AuSupportColor}">
<TextBlock x:Name="Label" TextWrapping="Wrap" Text="İğne Alanı / Needle Area" Foreground="White" TextAlignment="Center" Margin="0" VerticalAlignment="Center" FontFamily="Noto Sans" FontWeight="Normal"/>
</Border>
<Grid x:Name="Values" HorizontalAlignment="Stretch" Margin="10,10,10,10" VerticalAlignment="Stretch" Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="Header" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="128"/>
<ColumnDefinition/>
<ColumnDefinition Width="128"/>
</Grid.ColumnDefinitions>
<Image x:Name="Logo1" Source="Images/AULogo.png" Margin="0" Grid.RowSpan="4" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100"/>
<Image x:Name="Logo2" Source="Images/AnkudemLogo.png" Margin="0" Grid.RowSpan="4" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100"/>
<TextBlock x:Name="Header_1" Grid.Column="1" Margin="0" TextWrapping="Wrap" Text="AYÖS" FontSize="28" TextAlignment="Center" FontWeight="Bold" Foreground="#FF284985" FontFamily="Noto Sans"/>
<TextBlock x:Name="Header_2" Grid.Column="1" Margin="0" TextWrapping="Wrap" Text="SINAV GÖREV KARTI" FontSize="24" TextAlignment="Center" Grid.Row="1" Foreground="#FF284985" FontFamily="Noto Sans"/>
<TextBlock x:Name="Header_3" Grid.Column="1" Margin="0" TextWrapping="Wrap" Text="EXAMINATION TASK CARD" FontSize="24" TextAlignment="Center" Grid.Row="2" Foreground="#FF284985" FontFamily="Noto Sans"/>
<TextBlock x:Name="DateText" Grid.Column="1" Margin="0" TextWrapping="Wrap" FontSize="22" TextAlignment="Center" Grid.Row="3" Foreground="#FF284985" Text="28 Mayıs 2016 – May 28, 2016" FontFamily="Noto Sans"/>
</Grid>
<Grid x:Name="Data" Grid.Row="1" Margin="0,18,0,-17">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="NameText" Margin="0,10,0,0" TextWrapping="Wrap" FontSize="32" TextAlignment="Center" Foreground="Red" Text="BERK BABADOĞAN" FontWeight="Bold" FontFamily="Noto Sans"/>
<TextBlock x:Name="TaskText" Margin="0,0,0,10" TextWrapping="Wrap" Text="Salon Başkanı" FontSize="28" TextAlignment="Center" Foreground="Black" Grid.Row="1" FontFamily="Noto Sans"/>
</Grid>
<Grid x:Name="Specs" Margin="10" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="SpecsH_1" Margin="0,0,5,0" TextWrapping="Wrap" Text="Sınav Yeri / Exam Area: " FontSize="20" Foreground="#FF343434" FontStyle="Italic" FontWeight="Bold" VerticalAlignment="Center" FontFamily="Noto Sans"/>
<TextBlock x:Name="SpecsH_2" Margin="0,0,5,0" TextWrapping="Wrap" Text="Salon Adı / Hall Name:" FontSize="20" Foreground="#FF343434" Grid.Row="1" FontStyle="Italic" FontWeight="Bold" VerticalAlignment="Center" FontFamily="Noto Sans"/>
<TextBlock x:Name="SpecsH_3" Margin="0,0,5,0" TextWrapping="Wrap" Text="Salon No / Hall Number:" FontSize="20" Foreground="#FF343434" Grid.Row="2" FontStyle="Italic" FontWeight="Bold" VerticalAlignment="Center" FontFamily="Noto Sans"/>
<TextBlock x:Name="AreaText" Margin="5,0,0,0" TextWrapping="Wrap" Text="İstanbul" FontSize="20" Foreground="#FF343434" FontStyle="Italic" Grid.Column="1" VerticalAlignment="Center" FontFamily="Noto Sans"/>
<TextBlock x:Name="HallNameText" Margin="5,0,0,0" TextWrapping="Wrap" Text="A Blok 3. Kat Derslik 316" FontSize="20" Foreground="#FF343434" Grid.Row="1" FontStyle="Italic" Grid.Column="1" VerticalAlignment="Center" FontFamily="Noto Sans"/>
<TextBlock x:Name="HallNoText" Margin="5,0,0,0" TextWrapping="Wrap" Text="340111" FontSize="20" Foreground="#FF343434" Grid.Row="2" FontStyle="Italic" Grid.Column="1" VerticalAlignment="Center" FontFamily="Noto Sans"/>
</Grid>
</Grid>
</Grid>
</Border>
It is the code how I create an instance from my user control:
var item = new TaskCard(Name_TextBox.Text.ToUpper() + " " + Surname_TextBox.Text.ToUpper(), Task_TextBox.Text, ExamArea_TextBox.Text, HallName_TextBox.Text,HallNumber_TextBox.Text,DateConverter.Get(Date_Picker.Date.ToString())); // Creating card.
RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(item); // Gives error here.
var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();
For converting, UWP app also has RenderTargetBitmap class for capturing a UIElement as an image source. For file saving, you could reference this turtorial. In UWP app we have FileSavePicker which is similar to SaveFileDialog. For example, a completed demo as follows:
RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(elementToRender, 642,416);
var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();
var savePicker = new FileSavePicker();
savePicker.DefaultFileExtension = ".png";
savePicker.FileTypeChoices.Add(".png", new List<string> { ".png" });
savePicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
savePicker.SuggestedFileName = "snapshot.png";
// Prompt the user to select a file
var saveFile = await savePicker.PickSaveFileAsync();
// Verify the user selected a file
if (saveFile == null)
return;
// Encode the image to the selected file on disk
using (var fileStream = await saveFile.OpenAsync(FileAccessMode.ReadWrite))
{
var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, fileStream);
encoder.SetPixelData(
BitmapPixelFormat.Bgra8,
BitmapAlphaMode.Ignore,
(uint)renderTargetBitmap.PixelWidth,
(uint)renderTargetBitmap.PixelHeight,
DisplayInformation.GetForCurrentView().LogicalDpi,
DisplayInformation.GetForCurrentView().LogicalDpi,
pixelBuffer.ToArray());
await encoder.FlushAsync();
}
More details you could reference the official XAML render to bitmap sample.
Update:
Also add the XAML code section which use a UserControl for testing. What pass to the RenderAsync method should be the name of the Element you want to render.
<local:MyUserControl
x:Name="elementToRender"
Width="100"
Height="150" />
I did some researches why I can't render a TargetBitmap from code. I found a reason at this link:
You cannot save visual element which in code (offscreen) to image.
So, I foluna a new way to render my code based user control. I created my user control via code like this:
//Initializing task card.
var item = new TaskCard(Name_TextBox.Text.ToUpper() + " " + Surname_TextBox.Text.ToUpper(), Task_TextBox.Text, ExamArea_TextBox.Text, HallName_TextBox.Text, HallNumber_TextBox.Text, DateConverter.Get(Date_Picker.Date.ToString())); // Creating card.
After this, I added a custom popup-like element with this:
<Border x:Name="RingBorder" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" BorderBrush="{ThemeResource SystemControlBackgroundBaseHighRevealBorderBrush}" BorderThickness="2,2,2,2" RequestedTheme="Default" Visibility="Collapsed" >
<Grid x:Name="InnerGrid_Ring" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" RequestedTheme="Default" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid x:Name="WaiterRing_SecondRow" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock x:Name="LoadValue_Ring" Text="Lütfen bekleyin..." TextWrapping="Wrap" FontWeight="Normal" Margin="10,0,10,0" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Stretch" Grid.Column="1" Style="{StaticResource TitleTextBlockStyle}" />
<ProgressRing x:Name="Waiter_Ring" HorizontalAlignment="Center" Margin="10,10,10,10" VerticalAlignment="Center" Foreground="{StaticResource AndroidGreen}" IsActive="True" Width="40" Height="40"/>
</Grid>
<Grid x:Name="CardViewerGrid_Ring" HorizontalAlignment="Center" Height="416" Margin="0,0,0,0" VerticalAlignment="Center" Width="642"/>
</Grid>
</Border>
Lastly, I'm rendering the user control like this:
//Converting UIelement to Rendered Bitmap
CardViewerGrid_Ring.Children.Add(item); // Adding card to canvas.
RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(CardViewerGrid_Ring); // Render canvas.
var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();
And, voila :)
I'm trying to create a user interface which mimics the behavior of google images in that when a tile is clicked, the image in a "row" below the row the image is on, without causing the remaining elements in the row to move.
This is as far as I've gotten. The following user control can be added to a WrapPanel, when the user clicks on the first StackPanel, the PdfViewerWrapperGrid should appear:
<UserControl x:Class="APDesktop.Controls.PdfAttachment"
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:mui="http://firstfloorsoftware.com/ModernUI"
mc:Ignorable="d"
d:DesignHeight="395" d:DesignWidth="503">
<Grid Background="{StaticResource WindowBackground}">
<StackPanel Width="100" Height="100" Margin="5" MouseUp="StackPanel_MouseUp" HorizontalAlignment="Left" VerticalAlignment="Top">
<Border BorderBrush="{StaticResource ResourceKey=ButtonBorderPressed}" Height="100" Width="100" BorderThickness="1">
<Grid>
<mui:ModernButton x:Name="DeleteButton" Width="20" IconData="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z " Margin="39,5,5,0" HorizontalAlignment="Right" VerticalAlignment="Top" Click="DeleteButton_Click"/>
<Grid Margin="20" Height="50" VerticalAlignment="Top">
<Grid.Background>
<VisualBrush Stretch="Uniform" Visual="{StaticResource PDFIcon}"/>
</Grid.Background>
</Grid>
<TextBlock x:Name="FileNameTextBlock" TextTrimming="CharacterEllipsis" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="16" Foreground="{StaticResource ResourceKey=ButtonText}" Text="{Binding DisplayName}"></TextBlock>
</Grid>
</Border>
</StackPanel>
<Grid x:Name="PdfViewerWrapperGrid" Visibility="Visible">
<Polygon Points="55,110 35,125, 75,125" Stroke="{StaticResource ScrollBarBackground}" Fill="{StaticResource ScrollBarBackground}" />
<StackPanel x:Name="PdfViewerOuterStackPanel" Margin="30,125,30,0" Background="{StaticResource ScrollBarBackground}">
<Grid Margin="0,15,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.75*"/>
<ColumnDefinition Width="0.25*"/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Center" MaxWidth="150" TextTrimming="CharacterEllipsis" Text="{Binding DisplayName}" Grid.ColumnSpan="2" FontWeight="Bold" FontSize="18"></TextBlock>
<StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right">
<mui:ModernButton x:Name="SaveToSpecialFolderButton" ToolTip="Save to My Documents folder" IconData="F1 M 25,52L 51,52L 51,57L 25,57L 25,52 Z M 35,16L 41,16L 41,36.5L 49,27L 49,36.5L 38,49L 27,36.5L 27,27L 35,36.5L 35,16 Z " HorizontalAlignment="Right" Margin="7,0" Click="SaveToSpecialFolderButton_Click" ></mui:ModernButton>
<mui:ModernButton x:Name="SaveAnywhereButton" ToolTip="Save anywhere" IconData="F1 M 20.5833,20.5833L 55.4167,20.5833L 55.4167,55.4167L 45.9167,55.4167L 45.9167,44.3333L 30.0833,44.3333L 30.0833,55.4167L 20.5833,55.4167L 20.5833,20.5833 Z M 33.25,55.4167L 33.25,50.6667L 39.5833,50.6667L 39.5833,55.4167L 33.25,55.4167 Z M 26.9167,23.75L 26.9167,33.25L 49.0833,33.25L 49.0833,23.75L 26.9167,23.75 Z " HorizontalAlignment="Right" Margin="7,0" Click="SaveAnywhereButton_Click" ></mui:ModernButton>
<mui:ModernButton x:Name="CloseViewerButton" ToolTip="Close viewer" IconData="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z " HorizontalAlignment="Right" Margin="7,0" Click="CloseViewerButton_Click"></mui:ModernButton>
</StackPanel>
</Grid>
<ScrollViewer Background="{StaticResource ScrollBarBackground}">
<StackPanel x:Name="PdfViewerInnerStackPanel" Background="{StaticResource ScrollBarBackground}">
<!--<Image Width="25" Height="25" x:Name="MyImage"></Image>
<Image Width="25" Height="25"></Image>-->
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
</Grid>
I ended up using a grid as suggested earlier. This is certainly a manual approach involving 2 main methods in the code-behind. Hope this helps someone else.
The first calculates the appropriate row and column position for each tile:
private void ReDrawAttachmentsGrid()
{
foreach (var child in AttachmentsPanel.Children)
{
if (child is PdfAttachment)
{
var childAsPdfAttachment = child as PdfAttachment;
var indexOfAttachment = PdfAttachments.IndexOf(childAsPdfAttachment);
var tilesPerRow = (int)Math.Floor(AttachmentsOuterGrid.ActualWidth / 112);
var desiredRowIndex = (int)(indexOfAttachment / tilesPerRow);
desiredRowIndex += desiredRowIndex;
var desiredColumnIndex = (int)(indexOfAttachment % tilesPerRow);
if (AttachmentsPanel.RowDefinitions.Count - 1 < desiredRowIndex)
{
while (AttachmentsPanel.RowDefinitions.Count - 1 < desiredRowIndex)
AttachmentsPanel.RowDefinitions.Add(new RowDefinition());
}
if (AttachmentsPanel.ColumnDefinitions.Count - 1 < desiredColumnIndex)
{
var column = new ColumnDefinition();
column.Width = new GridLength(112);
AttachmentsPanel.ColumnDefinitions.Add(column);
}
Grid.SetColumn(childAsPdfAttachment, desiredColumnIndex);
Grid.SetRow(childAsPdfAttachment, desiredRowIndex);
}
}
The second shows a viewer on the row below the one being clicked, like so:
var pdfViewer = new PdfViewer(e.Images, e.ByteArray, e.DisplayName, e.AttachmentKey);
pdfViewer.AttachmentClosed += pdfViewer_AttachmentClosed;
AttachmentsPanel.Children.Add(pdfViewer);
Grid.SetColumnSpan(pdfViewer, 100);
var desiredRowIndex = Grid.GetRow(senderAsPdfAttachment) + 1;
if (AttachmentsPanel.RowDefinitions.Count - 1 < desiredRowIndex)
{
while (AttachmentsPanel.RowDefinitions.Count - 1 < desiredRowIndex)
AttachmentsPanel.RowDefinitions.Add(new RowDefinition());
}
Grid.SetRow(pdfViewer, desiredRowIndex);
I have a grid that I need to put into a border, doing this via XAML is easy
but how do I do this via C#?
everything that I have found thus far wants to add the border around each cell.
I need it to come out looking the same way XAML does it, please help!
I can not get the XAML to post correctly here:
<Border Grid.Column="1"
Grid.Row="0"
Background="AliceBlue"
BorderBrush="Black"
BorderThickness="4"
x:Name="Side6"
Visibility="Collapsed">
<UIElement.Projection>
<PlaneProjection RotationY="-90" />
</UIElement.Projection>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"></RowDefinition>
<RowDefinition Height="100"></RowDefinition>
<RowDefinition Height="100"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Column="2" Grid.Row="1" Click="RotateRight_Click">
<Button.Content>
<StackPanel>
<TextBlock HorizontalAlignment="Center">Rotate Right</TextBlock>
<TextBlock HorizontalAlignment="Center">To</TextBlock>
<TextBlock HorizontalAlignment="Center">Side 4</TextBlock>
</StackPanel>
</Button.Content>
</Button>
<Button Grid.Column="0" Grid.Row="1" Click="RotateLeft_Click">
<Button.Content>
<StackPanel>
<TextBlock HorizontalAlignment="Center">Rotate Left</TextBlock>
<TextBlock HorizontalAlignment="Center">To</TextBlock>
<TextBlock HorizontalAlignment="Center">Side 2</TextBlock>
</StackPanel>
</Button.Content>
</Button>
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Grid.Column="1"
Grid.Row="1"
Text="Side 6">
</TextBlock>
</Grid>
</Border>
Here is the C# code that I'm using, maybe you can see what I am doing wrong?
public static void panelMain(string strPassGridName, System.Windows.Media.Color mcPassColor,
int intRowProperty, int intColumnProperty, Visibility vVisibility,
string[] strButtonTitles, Grid passLayoutRoot, Canvas passCanvas)
{
Grid panelGrid = new Grid();
panelGrid.Name = strPassGridName;
panelGrid.Background = new SolidColorBrush(mcPassColor);
panelGrid.SetValue(Grid.RowProperty, intRowProperty);
panelGrid.SetValue(Grid.ColumnProperty, intColumnProperty);
panelGrid.Visibility = vVisibility;
RowDefinition row1 = new RowDefinition();
row1.Height = new GridLength(100, GridUnitType.Auto);
panelGrid.RowDefinitions.Add(row1);
ColumnDefinition column1 = new ColumnDefinition();
column1.Width = new GridLength(100);
panelGrid.ColumnDefinitions.Add(column1);
passLayoutRoot.Children.Add(panelGrid);
}
I figured it out, I needed to create the border first then add the grid to the border.
One major difference is that I could not reference the border object directly, I needed to "find it"
Border findBorder = passLayoutRoot.FindName("bd" + strPassGridName) as Border;
if (findBorder == null)
{ }
else
{
findBorder.Child = panelGrid;
}
This worked perfectly....
Thanks to all that attempted to help
You can do it as below,
Border gridBorder = new Border();
gridBorder.BorderBrush = new SolidColorBrush(Colors.Black);
gridBorder.BorderThickness = new Thickness(4);
gridBorder.Child = new Grid(); //Your grid here
LayoutRoot.Children.Add(border); // ParentGrid(layout) holding the border