Develop Reference

C# WinUI 3 desktop application. How to set background image of relative panel or page

I just want to set a background image on a relative panel, and a page. I have tried to set the background image in a stub program on the main window. I am able to set background colors but not set an image to be the background. Here is my code. I used ImageBrush ImageSource but nothing shows up. I physically copied the image file into the project, into the 'Assets' folder. What am I doing wrong? Thank you for your help.
<Window
x:Class="App_WinUI3_Background_Sandbox.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:local="using:App_WinUI3_Background_Sandbox"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Border>
<Border.Background>
<!--<ImageBrush ImageSource="Assets/githubglobe.png"/>-->
THIS DOES NOT WORK.
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
THIS WORKS!!!!
<GradientStop Offset="0.0" Color="Yellow" />
<GradientStop Offset="0.25" Color="Red" />
<GradientStop Offset="0.75" Color="Blue" />
<GradientStop Offset="1.0" Color="LimeGreen" />
</LinearGradientBrush>
</Border.Background>
<StackPanel
HorizontalAlignment="Center"
VerticalAlignment="Center"
Orientation="Horizontal">
<StackPanel.Background>
<ImageBrush ImageSource="Assets/githubglobe.png" />
THIS DID NOT WORK EITHER
</StackPanel.Background>
<Button
x:Name="myButton"
Click="myButton_Click">
Click Me
</Button>
</StackPanel>
</Border>
</Window>

I figured it out a few minutes later. Set the 'Build Action' property of the image from 'None' to 'Content' in the solution explorer. Now the background image works perfectly!!!

Shadow like border outside Border element in Xaml

I need my component to have a border that is dark closer to the component and then it fades out going away. DropShadowEffect appears on two side only (right and lower) while I want it on all four sides.
Here's what I need
While I currently have something like,
And here's my current code,
<Border x:Name="ShadowBorder" BorderThickness="1" Width="242" Height="280" Margin="5,5,5,5">
<Border.BorderBrush>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5">
<GradientStop Color="Blue" Offset="0"/>
<GradientStop Color="LightBlue" Offset="1"/>
</RadialGradientBrush>
</Border.BorderBrush>
</Border>

You were on the right track using DropShadowEffect. The reason why it only blurred on two sides was because of your ShadowDepth. Set it to 0, and you will get what you want.
<Border x:Name="ShadowBorder" BorderThickness="1" Width="242" Height="280" Margin="5,5,5,5" Background="#00FFFFFF">
<Rectangle Fill="White" Width="242" Height="280"/>
<Border.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="0" Color="LightBlue"/>
</Border.Effect>
</Border>
Here's what it will look like:

WPF copy blend Regular Polygon into application

I have created a ellipse with a triangle in Blend 2012. I went to copy the xaml into my WPF application. However I get the error message "The name RegularPolygon does not exist in the namespace http://schemas.microsoft.com/expression/2010/drawing. What is missing?
<Application x:Class="WpfSimulator.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ed:RegularPolygon HorizontalAlignment="Left" Height="32" InnerRadius="1" Margin="29,14,0,0" PointCount="3" Stretch="Fill" Stroke="Black" StrokeThickness="0" VerticalAlignment="Top" Width="37" RenderTransformOrigin="0.5,0.5">
<ed:RegularPolygon.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90.492"/>
<TranslateTransform/>
</TransformGroup>
</ed:RegularPolygon.RenderTransform>
<ed:RegularPolygon.Fill>
<RadialGradientBrush RadiusY="1.241" RadiusX="0.611">
<GradientStop Color="#FF1F1FD8"/>
<GradientStop Color="White" Offset="1"/>
</RadialGradientBrush>
</ed:RegularPolygon.Fill>
</ed:RegularPolygon>

You should add reference to the assembly Microsoft.Expression.Drawing.
Like this:

Color inversion in XAML

In my WP8 application I want to make a color inversion effect. I have no idea what tools I should use so I'll just explain what I want in a very general terms.
How it is supposed to work: say I have a UserControl that consists of black rectangle and some white text on top of it. I want to apply something to that user control that will invert colors of a part of UserControl that it covers. Some invisible rectangle that spans say 50% of UserControl and in that area background will be white and text will be black. I want it to be dynamic so I can change the area it covers at runtime.
Here's an image to illustrate this:
Inversion effect applied to a half of control.
I believe it's possible to achieve this by using two controls with same text, inverted colors and opacity mask but I wonder if this can be done in a more clean and direct way?

I think what you're looking for ideally would either be two TextBlocks with OpacityMask applied to the one on top like;
<Grid MaxWidth="100">
<TextBlock Text="Hey check it out we can change object gradients! yay!" Foreground="Red"
TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="Hey check it out we can change object gradients! yay!" Foreground="Blue"
TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.OpacityMask>
<LinearGradientBrush StartPoint="0.1,0.1" EndPoint="0.75,0.75">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.322" Color="Black"/>
<GradientStop Offset="0.739" Color="Transparent"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.OpacityMask>
</TextBlock>
</Grid>
Or you could just apply a LinearGradientBrush directly to the Foreground (or Background of other element) itself like;
<Border Width="100" Height="50">
<Border.Background>
<LinearGradientBrush StartPoint="0.062,0.552" EndPoint="0.835,0.548">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.5" Color="White"/>
<GradientStop Offset="0.5" Color="Black"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="Hello World!" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0.1,0.1" EndPoint="0.75,0.75">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.5" Color="Black"/>
<GradientStop Offset="0.5" Color="White"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</Border>
or gettin 80's style fancy;
<Border Width="100" Height="50">
<Border.Background>
<LinearGradientBrush StartPoint="0.472,0.047" EndPoint="0.47,0.942">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.541" Color="White"/>
<GradientStop Offset="0.548" Color="Black"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="Hello World!" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0.472,0.047" EndPoint="0.47,0.942">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.631" Color="Black"/>
<GradientStop Offset="0.635" Color="White"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</Border>
Give that a shot, hope this helps.

Custom Brush - I want two gradients chaining them together

I am making a bar chart and I want two separate gradients for each bar. First I want a gradient to go from top to bottom solid red to transparent red. I want to paint over the top of that a gradient that goes from right to left, black to opaque.
So - In the bottom left we should have;
Bottom left - Alpha 0
Bottom right - Alpha 0
Top left - Alpha 255 Colour Red
Top Right - Alpha 255 Colour Black
So in effect I want to take a solid colour, add a left to right gradient to black then take the output of that and add a top to bottom gradient to transparency.
All this and I want it to be in a single brush, is this even possible?

Yes. Use a VisualBrush whose Visual is a Rectangle inside a Border to combine the other two brushes.
Something like this:
<LinearGradientBrush x:Key="UnderBrush" EndPoint="0,1">
<GradientStop Color="#FFFF0000" Offset="0" />
<GradientStop Color="#00FF0000" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="OverBrush" EndPoint="1,0">
<GradientStop Color="#00000000" Offset="0" />
<GradientStop Color="#FF000000" Offset="1" />
</LinearGradientBrush>
<VisualBrush x:Key="CombinedBrush">
<VisualBrush.Visual>
<Border Background="{StaticResource UnderBrush}">
<Rectangle Fill="{StaticResource OverBrush}" Width="1" Height="1" />
</Border>
</VisualBrush.Visual>
</VisualBrush>
CombinedBrush can be used to paint your bars, and you will get the effect you describe.
Silverlight version
Since Silverlight has no VisualBrush you must build a WritableBitmap in code and use it with an ImageBrush:
<ImageBrush x:Key="CombinedBrush">
<my:VisualBrushSimulator.Visual>
<Border Background="{StaticResource UnderBrush}">
<Rectangle Fill="{StaticResource OverBrush}" Width="1" Height="1" />
</Border>
</my:VisualBrushSimulator.Visual>
</ImageBrush>
Here is how the VisualBrushSimulator might be implemented:
public class VisualBrushSimulator : DependencyObject
{
public Visual GetVisual(DependencyObject obj) { return (Visual)obj.GetValue(VisualProperty); }
public void SetVisual(DependencyObject obj, Visual value) { obj.SetValue(VisualProperty, value); }
public static readonly DependencyProperty VisualProperty = DependencyProperty.RegisterAttached("Visual", typeof(Visual), typeof(VisualBrushSimulator), new PropertyMetadata
{
PropertyChangedCallback = (obj, e) =>
{
int width=1000;
int height=1000;
var bitmap = new WritableBitmap(width, height);
bitmap.Render((Visual)e.NewValue, new ScaleTransform { ScaleX = width, ScaleY = height });
((ImageBrush)obj).ImageSource = bitmap;
}
});
}
Note that this is not a true VisualBrush simulation, since changes to the Visual do not affect the brush.

If the template for your bar is based on Grids, you could then overlay the 2 gradients as below. I am not sure I fully understood what you wanted for your 2nd gradient, but I assume you mean left-to-right, transparent black to solid black. If I misunderstood, it is easy to change the 2nd gradient in the XAML below.
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid Width="100" Height="300" >
<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFFF0000" Offset="0" />
<GradientStop Color="#00FF0000" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#00000000" Offset="0" />
<GradientStop Color="#FF000000" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
</Grid>
</UserControl>
Paste this XAML into Charles Petzold's XAML Cruncher to see the results.
Good luck,
Jim McCurdy
Face to Face Software and YinYangMoney