We Keep Coding

rendering wpf control to bitmap [duplicate]

I'm having a problem with RenderTargetBitmap whenever I render canvas and clear its children and set the rendered bitmap as background of canvas it slide toward bottom right.
can't insert images until 10 reputation :(.
WPF:
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="500" Width="700"
KeyDown="Window_KeyDown">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="Black" BorderThickness="1" Grid.Row="1" Grid.Column="1">
<Canvas x:Name="Pad">
<Rectangle Height="100" Width="100" Fill="Red" Canvas.Left="10" Canvas.Top="10"></Rectangle>
</Canvas>
</Border>
</Grid>
</Window>
c# code:
namespace WpfApp1
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Window_KeyDown(object sender, KeyEventArgs e)
{
RenderTargetBitmap rendrer = new RenderTargetBitmap(Convert.ToInt32(Pad.ActualWidth), Convert.ToInt32(Pad.ActualHeight), 96, 96, PixelFormats.Pbgra32);
rendrer.Render(Pad);
Pad.Background = new ImageBrush(rendrer);
Pad.Children.Clear();
}
}
}

To avoid any offset problems with drawing a Visual into a RenderTargetBitmap, you may use an intermediate DrawingVisual:
var rect = new Rect(Pad.RenderSize);
var visual = new DrawingVisual();
using (var dc = visual.RenderOpen())
{
dc.DrawRectangle(new VisualBrush(Pad), null, rect);
}
var bitmap = new RenderTargetBitmap(
(int)rect.Width, (int)rect.Height, 96, 96, PixelFormats.Default);
bitmap.Render(visual);
Pad.Background = new ImageBrush(bitmap);
Pad.Children.Clear();
Note that without setting any further properties of the ImageBrush (like e.g. its Viewport), it will fill the entire area of the Rectangle. For details, see TileBrush Overview.

Your primary problem stems from the fact that, due to the 1-pixel border around the Canvas, its VisualOffset vector is (1,1). Thus, any visual effect, like the background brush, will be applied at that offset. When you render the visual into a bitmap, it captures the present appearance, and then when you set the bitmap as the brush, it gets shifted.
Ironically, one of the easiest ways to fix this is to insert another <Border/> element into your XAML:
<Border BorderBrush="Black" BorderThickness="1" Grid.Row="1" Grid.Column="1">
<Border>
<Canvas x:Name="Pad">
<Rectangle Height="100" Width="100" Fill="Red" Canvas.Left="10" Canvas.Top="10"/>
</Canvas>
</Border>
</Border>
Then the offset caused by the outer <Border/> element is handled by the new <Border/> element's transform, rather than being applied to the <Canvas/> element.
That change alone will almost fix your code completely. However, there's one other little artifact that you may still notice: every time you render the visual, it gets just a teensy bit blurrier. This is because the default value for the Brush object's Stretch property is Stretch.Fill, and because your <Canvas/> element is not precisely an integral width or height, the bitmap (which necessarily does have integral width and height) gets stretched just a teensy bit when rendered. With each iteration, this becomes more and more apparent.
You can fix that by setting the Stretch property to Stretch.None. At the same time, you'll also want to set the brush's alignment to Left and Top:
private void Window_KeyDown(object sender, KeyEventArgs e)
{
RenderTargetBitmap renderer = new RenderTargetBitmap(
Convert.ToInt32(Pad.ActualWidth), Convert.ToInt32(Pad.ActualHeight), 96, 96, PixelFormats.Pbgra32);
renderer.Render(Pad);
ImageBrush brush = new ImageBrush(renderer);
brush.AlignmentX = AlignmentX.Left;
brush.AlignmentY = AlignmentY.Top;
brush.Stretch = Stretch.None;
Pad.Background = brush;
Pad.Children.Clear();
}
The defaults are Center, which again incurs the rounding error and will cause both movement and blurring of the image after repeated iterations of the process.
With the above changes, I found a perfectly stable image, regardless of the number of iterations.
The "wrap in a border" idea came from here: https://blogs.msdn.microsoft.com/jaimer/2009/07/03/rendertargetbitmap-tips/
On that page you'll find a more general-purpose solution which does not require modification of the actual XAML. In your example above, the "wrap in a border" approach seems like a reasonable work-around, but it is admittedly not as clean as forcing an unadorned context into which you can render the visual, as shown on that blog page.

How to exclude child from layouting

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>

How to apply a simple blur effect?

I programm an universal Windows platform app with Visual Studio and I want to get a simple Blur effect on my main grid layout, but I don't know how to apply a GaussianBlurEffect object on my grid. I searched for a long time and I've readed the Microsoft documentation but I don't understand the Visual Layer part.
If anyone can give me a little explaination about visuals, it would be nice :)
Sorry if my English is bad, I'm french.

You will find a lot of good samples on the Windows UI DevLabs repository
The idea of Visuals is to provide a low level API (but not as low as DirectX) to handle a lot of GPU accelerated effects on the UI. It allows you to draw what you want or create some effects on the rendering.
Here is a very basic sample to show how to apply a blur effect on a Grid. (It works the same for any other UIElement).
This code is adding a layer over the one used by the XAML renderer to render the grid. This newest layer will apply an effect on top of the image rendered by the XAML renderer.
The XAML of the page:
<Page
x:Class="BlurSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BlurSample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="MainGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Fill="Red" />
<Rectangle Fill="Green" Grid.Column="1" />
<Rectangle Fill="Blue" Grid.Row="1" Grid.Column="1" />
<Rectangle Fill="Yellow" Grid.Row="1" />
</Grid>
And the code behind:
public sealed partial class MainPage : Page
{
private CompositionEffectBrush brush;
private Compositor compositor;
public MainPage()
{
this.InitializeComponent();
MainGrid.SizeChanged += OnMainGridSizeChanged;
compositor = ElementCompositionPreview.GetElementVisual(MainGrid).Compositor;
// we create the effect.
// Notice the Source parameter definition. Here we tell the effect that the source will come from another element/object
var blurEffect = new GaussianBlurEffect
{
Name = "Blur",
Source = new CompositionEffectSourceParameter("background"),
BlurAmount = 100f,
BorderMode = EffectBorderMode.Hard,
};
// we convert the effect to a brush that can be used to paint the visual layer
var blurEffectFactory = compositor.CreateEffectFactory(blurEffect);
brush = blurEffectFactory.CreateBrush();
// We create a special brush to get the image output of the previous layer.
// we are basically chaining the layers (xaml grid definition -> rendered bitmap of the grid -> blur effect -> screen)
var destinationBrush = compositor.CreateBackdropBrush();
brush.SetSourceParameter("background", destinationBrush);
// we create the visual sprite that will hold our generated bitmap (the blurred grid)
// Visual Sprite are "raw" elements so there is no automatic layouting. You have to specify the size yourself
var blurSprite = compositor.CreateSpriteVisual();
blurSprite.Size = new Vector2((float) MainGrid.ActualWidth, (float) MainGrid.ActualHeight);
blurSprite.Brush = brush;
// we add our sprite to the rendering pipeline
ElementCompositionPreview.SetElementChildVisual(MainGrid, blurSprite);
}
private void OnMainGridSizeChanged(object sender, SizeChangedEventArgs e)
{
SpriteVisual blurVisual = (SpriteVisual) ElementCompositionPreview.GetElementChildVisual(MainGrid);
if (blurVisual != null)
{
blurVisual.Size = e.NewSize.ToVector2();
}
}
}
Update: Animation
To animate the blur effect, you will have to do two things:
declare the property you want to animate
create the animation
To declare the property, you will have to change the blurEffectFactory creation. Notice the declaration of the Blur.BlurAmount property :
// we convert the effect to a blur that can be used to paint the visual layer
var blurEffectFactory = compositor.CreateEffectFactory(blurEffect, new[] { "Blur.BlurAmount" });
brush = blurEffectFactory.CreateBrush();
Once declared, you can use the Blur.BlurAmount property in any animation you want. Here, I'm declaring a continuous animation of 3 seconds which will blur/unblur the image:
var blurAnimation = compositor.CreateScalarKeyFrameAnimation();
blurAnimation.InsertKeyFrame(0.0f, 100.0f);
blurAnimation.InsertKeyFrame(0.5f, 0.0f);
blurAnimation.InsertKeyFrame(1.0f, 100.0f);
blurAnimation.Duration = TimeSpan.FromSeconds(3);
blurAnimation.IterationBehavior = AnimationIterationBehavior.Forever;
brush.StartAnimation("Blur.BlurAmount", blurAnimation);

WPF controls and margin proportional to the window size

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;
}

WPF wrap panel and scrolling

I have a simple WrapPanel which contains a number of wide controls. When I resize the Width of the Window everything works as expected. The controls will go across on a single line if there is enough space or wrap down to the next line when there isn't.
However, what I need to happen is that if all of the controls are basically stacked vertically (since there is no more horizontal space) and the Width of the Window is decreased even more, a horizontal scroll bar appears so that I can scroll and see the entire control if I want to. Below is my xaml. I tried wrapping the WrapPanel in a ScrollViewer but I couldn't achieve my goal.
<Window x:Class="WpfQuotes.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="Auto" Width="600" Foreground="White">
<WrapPanel>
<Button Width="250">1</Button>
<Button Width="250">2</Button>
<Button Width="250">3</Button>
</WrapPanel>
</Window>
So if you reduce the Width of the above Window to its minimum, you will not be able to see the text of the buttons. I would like a horizontal scroll bar appear so that I can scroll to see the text but not interfere with the usual wrapping functionality.
Thanks.
Update:
I have followed Paul's suggestion below and the horizontal scrollbar appears as expected now. However, I also wanted vertical scrolling available so I set VerticalScrollBarVisibility="Auto". The thing is, if I resize the window so that a vertical scroll bar appears, the horizontal one also always appears, even if it is not needed (there is enough horizontal space to see the entire control). It seems like the vertical scrollbar appearing is messing with the width of the scrollviewer. Is there a way to correct this so that the horizontal scrollbar doesn't appear unless it is actually needed?
Below is my xaml and the only code I added in the CustomWrapPanel:
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cwp="clr-namespace:CustomWrapPanelExample"
Title="Window1" Height="Auto" Width="300" Foreground="White" Name="mainPanel">
<ScrollViewer x:Name="MyScrollViewer" HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<cwp:CustomWrapPanel Width="{Binding ElementName=MyScrollViewer, Path=ActualWidth}">
<Button Width="250">1</Button>
<Button Width="250">2</Button>
<Button Width="250">3</Button>
<Button Width="250">4</Button>
<Button Width="250">5</Button>
<Button Width="250">6</Button>
<Button Width="250">7</Button>
<Button Width="250">8</Button>
<Button Width="250">9</Button>
</cwp:CustomWrapPanel>
</ScrollViewer>
</Window>
The only thing overridden in CustomWrapPanel:
protected override Size MeasureOverride(Size availableSize)
{
double maxChildWidth = 0;
if (Children.Count > 0)
{
foreach (UIElement el in Children)
{
if (el.DesiredSize.Width > maxChildWidth)
{
maxChildWidth = el.DesiredSize.Width;
}
}
}
MinWidth = maxChildWidth;
return base.MeasureOverride(availableSize);
}

Here's the thing, if your going to use a wrap panel, it does two things, it will take up as much available space in one direction, and expand as needed in the other. For instance, if you place it inside of a window like you have it, it takes up as much horizontal space as it can, and then expands as needed downward, that's why a vertical scroll bar will work, the parent container says "this is how wide I am, but you can make yourself as big as you want vertically", if you change it to a horizontal scroll bar, the scroll viewer is essentially saying "this is how tall you can be, but you can be as wide as you want" in this case the wrap panel doesn't wrap because there is no horizontal constraints.
One potential solution is to change the direction the wrap panel wraps from horizontal to vertical like this (Which is probably not the ideal or expected behavior):
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
<WrapPanel Orientation="Vertical">
<Button Width="250">1</Button>
<Button Width="250">2</Button>
<Button Width="250">3</Button>
</WrapPanel>
</ScrollViewer>
In order to get the behavior your expecting, you'll have to do something closer to this:
<ScrollViewer x:Name="MyScrollViewer" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
<WrapPanel MinWidth="250" Width="{Binding ElementName=MyScrollViewer, Path=ViewportWidth}">
<Button Width="250">1</Button>
<Button Width="250">2</Button>
<Button Width="250">3</Button>
</WrapPanel>
</ScrollViewer>
However, this second solution only works if you already know the width of your child elements, ideally you want your max width to be set to the actual width of the largest child item, but in order to do that you'd have to create a custom control that derives from wrap panel and write the code yourself to check for that.

This is my solution for this:
<Grid Width="475">
<ItemsControl ItemsSource="{Binding Items}"
Height="450" Width="475" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:HorizontalListItemControl />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer>
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
</Grid>
I'll try to explain:
I used an ItemsControl, its ItemsSource was bound to my Items collection.
Inside it, I defined a WrapPanel as the ItemsPanelTemplate. This is what makes the wrapping job done.
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
But now, there is no scrolling, right?
To solve this, I defined an ItemsPresenter inside a ScrollViewer as the ControlTemplate:
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer>
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
And now you can scroll.
Hope I helped.

public bool CheckUIElementInBounary(UIElement element, Rect r)
{
bool inbound = false;
Point p1 = element.PointToScreen(new Point(0, 0));
Point p2 = element.PointToScreen(new Point(0, element.RenderSize.Height));
Point p3 = element.PointToScreen(new Point(element.RenderSize.Width, 0));
Point p4 = element.PointToScreen(new Point(element.RenderSize.Width, element.RenderSize.Height));
if (CheckPoint(p1, r) || CheckPoint(p2, r) || CheckPoint(p3, r) || CheckPoint(p4, r))
{
inbound = true;
}
return inbound;
}
public bool CheckPoint(Point p, Rect bounday)
{
bool inbound = false;
if (p.X >= bounday.Left && p.X <= bounday.Right && p.Y <= bounday.Top && p.Y <= bounday.Bottom)
{
inbound = true;
}
return inbound;
}
===================
void mainViewer_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
foreach (var item in this.mainContent.Items)
{
Button btn = item as Button;
Point p1 = mainViewer.PointToScreen(new Point(0, 0));
Point p2 = mainViewer.PointToScreen(new Point(mainViewer.ActualWidth, mainViewer.ActualHeight));
Rect bounds = new Rect(p1, p2);
if (!CheckUIElementInBounary(btn, bounds))
{
this.Title = btn.Content.ToString();
mainContent.ScrollIntoView(btn);
break;
}
}
}