We Keep Coding

Visualbrush binding in a style System.Windows.Data Error: 2

I just have a simple binding, it works well but there is an error popup.
The effects work but still an error.
And the error is
System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element. BindingExpression:(no path); DataItem=null; target element is 'VisualBrush' (HashCode=23487194); target property is 'Visual' (type 'Visual')
I have tried x: Reference but there would be another error.
Appreciated a lot if any can help.
<Style TargetType="{x:Type Window}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid>
<Border
x:Name="RoundMask"
CornerRadius="10"
Background="white"/>
<!-- The main content -->
<Grid>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=RoundMask}" />
</Grid.OpacityMask>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Re templating a window like that is not really the way I'd go about this sort of thing.
I'd use something more like the approach in this sample:
https://gallery.technet.microsoft.com/ThWPFPolishing-Chrome-f41be7fe
Finished fancy window is
Window6, using WindowChrome styling which is in the resource dictionary Dictionary1.
Which has stuff lika a big round close button. But to give you the idea before downloading:
<Style x:Key="FinishedWindow" TargetType="{x:Type Window}">
<Setter Property="FontFamily" Value="Comic Sans MS"/>
<Setter Property="Foreground" Value="{StaticResource DarkDark}"/>
<Setter Property="WindowChrome.WindowChrome">
<Setter.Value>
<WindowChrome CaptionHeight="0"
CornerRadius="20"
GlassFrameThickness="0"
NonClientFrameEdges="None"
ResizeBorderThickness="5"
/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid>
<Border Background="{StaticResource BrightMid}" BorderBrush="{StaticResource DarkLight}" BorderThickness="4,4,6,6"
CornerRadius="12">
<Border.Effect>
<BlurEffect KernelType="Gaussian" Radius="12" RenderingBias="Quality" />
</Border.Effect>
</Border>
<Border BorderBrush="{StaticResource DarkDark}" BorderThickness="2"
CornerRadius="12" ClipToBounds="True">
</Border>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="32"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}"
Foreground="{StaticResource DarkDark}"
Grid.Row="0"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
FontWeight="Bold"
FontSize="16"
/>
<Button Name="CloseButton"
Width="20" Height="20"
Grid.Row="0"
HorizontalAlignment="Right"
BorderThickness="0"
Margin="0,12,12,0"
Command="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CloseCommand}"
Style="{StaticResource CloseButton}"/>
<ContentPresenter Grid.Row="1" Margin="12"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
I gave your style a go.
Just using it implicitly had no effect at all.
I put it in app.xaml and gave it a key
<Application.Resources>
<Style TargetType="{x:Type Window}" x:Key="roundedWindowStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid>
<Border
x:Name="RoundMask"
CornerRadius="10"
Background="white"/>
<!-- The main content -->
<Grid>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=RoundMask}" />
</Grid.OpacityMask>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
And then I applied that to mainwindow
<Window
...
Title="MainWindow"
Style="{StaticResource roundedWindowStyle}"
Hit f5... and it kind of works. Well.
If you ignore that window chrome means it cannot work as you seem to intend.
You probably ought to be looking at using window chrome instead.
With what you have there.
At the absolute minimum, you need a Contentpresenter inside that Grid.
Because a window is a content control but it won't show any content at all if you have no contentpresenter in the template.

Using WindowChrome Class to set title bar background

I am wanting to just set the title bar and border of a WPF window but the title background property doesn't look to be exposed in the class.
I want to leave all default Window behavior and just set the color property of Title Bar and Border
What is the correct property to set?
I am refrencing: https://learn.microsoft.com/en-us/dotnet/api/system.windows.shell.windowchrome?view=netframework-4.7.2
<ResourceDictionary>
<Style x:Key="CustomWindowStyle" TargetType="{x:Type Window}">
<Setter Property="WindowChrome.WindowChrome">
<Setter.Value>
<WindowChrome/>
</Setter.Value>
</Setter>
<Setter Property="??" Value="Blue"/>
</Style>
</ResourceDictionary>
The only property I see is the Title Property and setting its color has no effect

So I resolved this and it was more involved then I had originally thought. Since the title bar is in the non-client area when editing it I would lose the visibility of the corner buttons.
In the end I had to reconstruct the title bar and create a class to implement the buttons to get the look I desired.
This will give you a window with a border and the title bar will also have a color. You need to implement the corner buttons though.
xmlns:shell="http://schemas.microsoft.com/netfx/2009/xaml/presentation"
<Style x:Key="StandardStyle" TargetType="{x:Type Window}">
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome
/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}" >
<Grid>
<!--Title Panel-->
<DockPanel LastChildFill="True">
<Border Background="Blue" DockPanel.Dock="Top"
Height="{x:Static SystemParameters.CaptionHeight}" x:Name="titlebar">
<Grid>
<!--Title text only-->
<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}"
VerticalAlignment="Top" HorizontalAlignment="Center" Background="Transparent" />
<usercontrols:CornerButtons HorizontalAlignment="Right"/>
</Grid>
</Border>
<!--Provides the actual content control-->
<Border Margin="0,0,0,0" >
<AdornerDecorator>
<ContentPresenter Content="{TemplateBinding Content}"/>
</AdornerDecorator>
</Border>
</DockPanel>
<!--Provides the actual window border-->
<Border
Margin="0,0,0,0"
Background="White"
Grid.ZIndex="-1"
BorderThickness="2,2,2,2" BorderBrush="Blue"
>
</Border>
<!--This is the top left system button-->
<!--<Button
Margin="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(shell:WindowChrome.WindowChrome).ResizeBorderThickness}"
Padding="1"
HorizontalAlignment="Left"
VerticalAlignment="Top"
shell:WindowChrome.IsHitTestVisibleInChrome="True"
Command="{x:Static shell:SystemCommands.ShowSystemMenuCommand}"
CommandParameter="{Binding ElementName=CalcWindow}">
<Image
Width="16"
Height="16"
shell:WindowChrome.IsHitTestVisibleInChrome="True"
Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Icon}" />
</Button>-->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Auto scrolling on TextBox ControlTemplate

I'm using the TextBox below, which in order to apply a DropShadowEffect on its text, uses a ControlTemplate. I managed to get the TextWrapping to work, but once the TextBox fills up, it's content goes out of view. How do I replicate the Auto scrolling to the bottom feature of a native TextBox?
<TextBox TextWrapping="Wrap"
Foreground="LimeGreen"
Background="Black"
Margin="10,40,10,40"
FontSize="40"
HorizontalAlignment="Stretch"
x:Name="Inp"
FontFamily="Courier New"
CaretBrush='LimeGreen'>
<TextBox.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid x:Name="RootElement">
<ScrollViewer>
<ContentPresenter Content="{TemplateBinding Text}">
<ContentPresenter.Effect>
<DropShadowEffect ShadowDepth="4"
Direction="330"
Color="LimeGreen"
Opacity="1"
BlurRadius="5" />
</ContentPresenter.Effect>
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property='TextWrapping'
Value='Wrap' />
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TextBox.Resources>
</TextBox>

This solution is a bit different that what you might expect. I think using the ContentPresenter is the wrong way because in the end you still want the functionality of the TextBox. So my solution focuses on getting rid of the border and focus indicator that mess up the drop shadow effect:
<TextBox x:Name="Inp"
Height="100"
HorizontalAlignment="Stretch"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
CaretBrush="LimeGreen"
FontFamily="Courier New"
FontSize="40"
Foreground="LimeGreen"
TextWrapping="Wrap">
<TextBox.Effect>
<DropShadowEffect BlurRadius="5"
Direction="330"
Opacity="1"
ShadowDepth="4"
Color="LimeGreen" />
</TextBox.Effect>
<TextBox.FocusVisualStyle>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate/>
</Setter.Value>
</Setter>
</Style>
</TextBox.FocusVisualStyle>
</TextBox>
I set the Background, BorderBrush to be transparent (=> no shadow). I removed the ContentPresenter; it's a 'regular textbox now. And to remove the focus border I set the FocusVisualStyle to an empty Template.

Content of a Button Style appears only in one Button instance

I have a Viewbox:
<Viewbox x:Key="SampleViewbox" >
<Grid>
<Ellipse Stroke="#e2e2e0" StrokeThickness="6" Fill="#d5273e" Width="128" Height="128"/>
</Grid>
</Viewbox>
I then include this in a Style like:
<Style x:Key="SampleStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="Transparent" >
<ContentPresenter Content="{StaticResource SampleViewbox}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now I created many buttons with SampleStyle
<Grid>
<StackPanel>
<Button Style="{StaticResource SampleStyle}" Height="50" Width="50"></Button>
<Button Style="{StaticResource SampleStyle}" Height="80" Width="80"></Button>
<Button Style="{StaticResource SampleStyle}" Height="20" Width="20"></Button>
</StackPanel>
</Grid>
However, Only one button has the Ellipse (viewbox)
How can I make all the buttons have/show the ellipse??

Viewbox is FrameworkElement which cannot belong to multiple parents. Every time buttons request a resource {StaticResource SampleViewbox} they get the same instance.
to change that behavior add x:Shared="False" attribute
<Viewbox x:Key="SampleViewbox" x:Shared="False">

I think a good approach is to use DataTemplate.
So you will have
<DataTemplate x:Key="SampleViewbox">
<Viewbox>
<Grid>
<Ellipse
Width="128"
Height="128"
Fill="#d5273e"
Stroke="#e2e2e0"
StrokeThickness="6" />
</Grid>
</Viewbox>
</DataTemplate>
And for style
<Style x:Key="SampleStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="Transparent">
<ContentPresenter ContentTemplate="{StaticResource SampleViewbox}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Setting the x:Shared attribute of the ViewBox to false as suggested by #ASh will indeed work but why don't you just include the ViewBox in the ControlTemplate like this?
<Style x:Key="SampleStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="Transparent" >
<Viewbox>
<Grid>
<Ellipse Stroke="#e2e2e0" StrokeThickness="6" Fill="#d5273e" Width="128" Height="128"/>
</Grid>
</Viewbox>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
A template is a template and a control instance is an instance.

Silverlight: Align button controls to right inside Datagrid cell

I have been trying this for a while. I am just stuck and can't get through it.
There are three controls in the datagrid cell.
1: A hyperlink Button
2: A clear button
3: A search button
What i need to do is to align the "clear" and "open button" align to the right of the column. The catch is the column is resizable.
I tried to give a fixed width to the hyperlink button it looks good but it gets messy when the column is resized.
The cell content has below style.
<Style TargetType="controls:HyperlinkClear">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:HyperlinkClear">
<Border BorderThickness="0" Margin="2" BorderBrush="Transparent">
<Border.Resources>
<Style x:Name="buttonStyle"
TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Width="12"
Height="12">
<TextBlock Margin="{TemplateBinding Margin}" Text="x"></TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Border.Resources>
<controlsToolkit:DockPanel Background="Transparent">
<Button Margin="-2,0,0,0" controlsToolkit:DockPanel.Dock="Right" HorizontalAlignment="Right" x:Name="MainSearchButton" Style="{StaticResource ButtonStyle}" IsTabStop="False"
Visibility ="{Binding IsRemoveButtonEnabled,Converter={StaticResource BoolToVisibilityConverter},Mode=TwoWay}">
<Image Source="./open.png" Height="14" Width="16" VerticalAlignment="Center"/>
</Button>
<Button controlsToolkit:DockPanel.Dock="Right" Cursor="hand"
Margin="3,-2,0,0" Visibility ="{Binding IsRemoveButtonEnabled,Converter={StaticResource BoolToVisibilityConverter},Mode=TwoWay}"
x:Name="RemoveItemButton" HorizontalAlignment="Right"
Style="{StaticResource buttonStyle}" IsTabStop="false"/>
<HyperlinkButton x:Name="HyperlinkButton" Style="{StaticResource HyperlinkButtonStyle}" Content="{TemplateBinding Content}" />
</controlsToolkit:DockPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Currently it looks like this.
Expected

I found the solution. The solution is to set the cellcontent's horizontal alignment to "Stretch".
Override the BindCellContent Method of the column.
public override void BindCellContent(FrameworkElement cellContent, DataGridRow row)
{
var hyperlinkButton = (HyperlinkClear)cellContent;
hyperlinkButton.HorizontalAlignment = HorizontalAlignment.Stretch;
}