Background drawing with inner offset - wpf

Question

I want my UserControl to have black background. The little thing is that I want it to have some offset from the sides.
I did it like this:
<UserControl x:Class="PitramVisionPlayerUI.Controls.Readout"
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"
mc:Ignorable="d"
d:DesignHeight="50" d:DesignWidth="200">
<UserControl.Background>
<DrawingBrush Stretch="Fill">
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<PathGeometry>
<PathFigure IsClosed="True" StartPoint="0.1,0.1">
<PathFigure.Segments>
<LineSegment Point="0.9,0.1" />
<LineSegment Point="0.9,0.9" />
<LineSegment Point="0.1,0.9" />
</PathFigure.Segments>
</PathFigure>
</PathGeometry>
</GeometryDrawing.Geometry>
<GeometryDrawing.Brush>
<SolidColorBrush Color="Black"></SolidColorBrush>
</GeometryDrawing.Brush>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</UserControl.Background>
</UserControl>
Problem is that it does not work. It keeps filling the whole rectangle. If I replace DrawingBrush's property Stretch from "Fill" to "None" I am getting a black dot right in the middle of my UserControl.

Answer 1

Without a precise description of how exactly you want your control to behave, it's impossible to provide precise details as to exactly what your code should look like.
As a general rule, for a DrawingBrush (or any TileBrush for that matter), you can use the Viewbox and Viewport properties to modify how the basic content of the brush is rendered. For example, by providing a viewbox that is a little larger than the actual content, it is possible to shrink the overall rendering within the viewport (i.e. the output area).
But, it's been my experience that the viewbox/viewport approach is always a bit "fiddly". Or rather, it's hard to gain a good intuitive grasp of what those parameters do, and so one often winds up just fiddling with the values until they get the results they want, with the result that the implementation is not very well generalized or reusable.
From your question, it's unclear what your desired relationship between this inset black background and the rest of the content in the control would be. However, one very straightforward approach would be simply to set the Padding property of the UserControl itself, thus causing all of the content inside the control to be inset by the given padding amount.
For example:
<UserControl x:Class="TestSO58234176BackgroundBorder.UserControl1"
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:l="clr-namespace:TestSO58234176BackgroundBorder"
<!-- Padding set to 5 pixels, so content (including background) is inset -->
Padding="5" mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid Background="Black">
<!-- Stretch the text so it's clear what the extent of the content is -->
<Viewbox Stretch="Fill">
<TextBlock Text="This is a test" Foreground="LightGreen" FontWeight="Bold"/>
</Viewbox>
</Grid>
</UserControl>
This will do exactly that. I.e. all of the content, including any background it has, will be inset within the user control by 5 pixels. It looks like this:
(The red border is in the window's markup, around the user control, so it's easier to see the actual dimension of the user control itself.)
On the other hand, maybe you want for the content to fill the control completely, but have just the background inset. While (as I mentioned) you can fiddle with the background brush's viewbox and viewport for complete control of the rendering of the background, and in theory this might even be the "best" or "most correct" way to do it, in most cases it should not be necessary. Instead, just provide separate element providing the background and which is displayed under the rest of the content of the control.
<UserControl x:Class="TestSO58234176BackgroundBorder.UserControl1"
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:l="clr-namespace:TestSO58234176BackgroundBorder"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<!-- Put a black rectangle under the actual content of the control, to act as an inset background -->
<Rectangle Fill="Black" Margin="5"/>
<!-- Put the actual content of the control inside this <ContentControl/> element -->
<ContentControl>
<Viewbox Stretch="Fill">
<TextBlock Text="This is a test" Foreground="LightGreen" FontWeight="Bold"/>
</Viewbox>
</ContentControl>
</Grid>
</UserControl>
That would look like this:
While the above example uses a <ContentControl/> element to contain the actual content of the user control, this isn't strictly necessary. It's just a convenient way to represent "here's where all your content goes". But of course, any sort of content can go here, as long as it's a valid child of a <Grid/>. The key here is that it shares the grid cell with the inset <Rectangle/> element that is acting as the background, and so renders as overlaid on top of that background.
If you like, you can even generalize the above, so that the "background" rectangle is part of the user control's template, instead of direct content. This way, there's a clear separation between what's part of the user control's visual aspect itself, and what's the actual content of the user control:
<UserControl x:Class="TestSO58234176BackgroundBorder.UserControl1"
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:l="clr-namespace:TestSO58234176BackgroundBorder"
mc:Ignorable="d"
Padding="5"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.Template>
<ControlTemplate TargetType="{x:Type l:UserControl1}">
<Grid>
<Rectangle Fill="Black" Margin="5"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</UserControl.Template>
<Viewbox Stretch="Fill">
<TextBlock Text="This is a test" Foreground="LightGreen" FontWeight="Bold"/>
</Viewbox>
</UserControl>