We Keep Coding

How to use Border on StackPanel

So, I am trying to develop app in WPF (again). I wanted to have nice, black border with rounded corenrs around my StackPanel. In order to do this I have written:
<Border x:Name="debugPanel" CornerRadius="10" BorderBrush="Black" BorderThickness="2" Grid.Row="5" Grid.Column="6" Grid.RowSpan="2">
<StackPanel Grid.RowSpan="3" Background="#C7C7C7">
<!--contents-->
</StackPanel>
</Border>
But the result is ugly :( See below picture:
Note that it even might be wrong way of adding a border, I just figured it out myself. So if you have any recommendations and remarks, I would gladly hear them out as well.

Set the background on the border instead of the StackPanel:
<Border x:Name="debugPanel" Background="#C7C7C7" CornerRadius="10" BorderBrush="Black" BorderThickness="2" Grid.Row="5" Grid.Column="6" Grid.RowSpan="2">
<StackPanel Grid.RowSpan="3" Background="Transparent">
<!--contents-->
</StackPanel>
</Border>

XAML- how to set the height of a <TabControl> to a fixed value?

I have the following XAML markup, which I am using to display the GUI of my C# application:
<Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition2" Height="0.05*"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<TabPanel x:Name="headerPanel" Background="White" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1" VerticalAlignment="Top"/>
<StackPanel Grid.Row="1" Orientation="Horizontal" FlowDirection="RightToLeft">
</StackPanel>
<StackPanel Grid.Row="1" Orientation="Horizontal" FlowDirection="LeftToRight" Height="30" VerticalAlignment="Top">
<Button Style="{DynamicResource NoChromeButton}" Click="backBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" >
<Image Source="C:\...\arrow_left.png" Height="30" Width="40" />
</Button>
<Button Style="{DynamicResource NoChromeButton}" Click="RefreshBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" >
<Image Source="C:\...\arrow_loop3.png" Height="30" Width="30" />
</Button>
<Button Style="{DynamicResource NoChromeButton}" Click="referThis" Margin="0,0,0,0" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Height="30" Width="80">
<TextBlock>Refer Patient</TextBlock>
</Button>
</StackPanel>
<Border x:Name="contentPanel" BorderBrush="Green" BorderThickness="5" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="2" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
The above markup is nested inside the following structure at the top of the file:
<Window x:Class.... >
<Window.Resources>
<Style ...>
...
<Setter Property="Template">
<Setter.value>
<ControlTemplate TargetType="{x:Type TabControl}">
<!--(Above markup goes here) -->
Later in the file, I have the following markup:
</ControlTemplate>
</Setter.value>
</Setter>
</Style>
...
</Window.Resources>
<Grid Name = "grid">
<Image x:Name="Connected" Source="...\abc.png" Height="50" Width="50" Margin="750, 0, -5, 640"></Image>
<!-- A few more image tags here -->
<TabControl ... >
<!-- XML for each of the tab items & their content here -->
</TabControl>
</Grid>
</Window>
This XAML displays the following GUI:
As you can see from the image, the 'main content' of the page is overlapping the <StackPanel> where I have added buttons for the navigation, and other features of my application (back, refresh, etc).
I can resize the window, by dragging one of the corners, and adjust it so that the buttons and other features are all displayed correctly:
However, it is also possible to resize the window too much (i.e. make it too large), which causes too much white space to be displayed between these buttons and things, and also causes the images on the far right hand side to be moved to a different location than the one I had intended:
The images on the far right hand side of my application window are the ones displayed by the XAML markup in the third bit of code that I have copied into my question.
So, my question is- is there a way that I can 'fix' the size of the <StackPanel>, <Grid>, <Style> or header of the <TabPanel> where I am displaying the navigation buttons and other images so that they're not resized with the rest of the window when the user drags one of the corners of the window around?
I tried setting the Height property of the <TabControl> to a specific value (e.g. 50), but this caused the whole content of the <TabControl> to shrink to 50... i.e. all of the content of the window was then displayed in an area on the window that was only 50 pixels high...
Basically, I want the content that I have shown here to remain the same no matter how the user interacts with the application, and only the content displayed below this to be updated dynamically as the user interact with the application. Anyone have any suggestions?

Try setting the height of row 1 from 0.05* to Auto! That should solve the overlap issue.

Image Distortion in ScrollViewer

I'm having a weird issue that causes an Image to get distorted if I re-size the window to a particular size. I'm assuming the image is being positioned inside the scrollviewer to a sub pixel position , but I'm not really sure how to fix this.
I'm using a Scaletransform, but the current issue is happening if the scale is set to 1.
If you Look at the Text in the screenshot below you'll see the text is slightly distorted , If i re-size the window by a single pixel , the distortion goes away as seen in the alternate screenshot.
Pixel Distortion
No Distortion
XAML Code:
<ScrollViewer x:Name="scrollViewer"
Background="#282828"
Focusable="False"
Grid.Column="2"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible" SnapsToDevicePixels="True">
<Border BorderBrush="Red" BorderThickness="1">
<Grid Name="grid" RenderTransformOrigin="0.5,0.5" SnapsToDevicePixels="True">
<Grid.LayoutTransform>
<TransformGroup>
<ScaleTransform x:Name="scaleTransform" CenterX="0.5" CenterY="0.5" />
</TransformGroup>
</Grid.LayoutTransform>
<Image Name="img" HorizontalAlignment="Left" VerticalAlignment="Top"
IsHitTestVisible="False"
RenderOptions.BitmapScalingMode="NearestNeighbor"
SnapsToDevicePixels="True"
Stretch="Uniform" />
</Grid>
</Border>
</ScrollViewer>

Just a hunch: Have you tried to apply UseLayoutRounding?

How to add a border to an image?

Why can't I add a border to the image I've added? What's wrong with this code?
<Border Name="imgBorder" BorderThickness="2">
<Image Height="150"
HorizontalAlignment="Left"
Margin="90,239,0,0" Name="image1"
Stretch="Fill" VerticalAlignment="Top"
Width="200"
Source="/ControlsBasics-WPF;component/GalleryImages/Lighthouse.jpg"
ImageFailed="image1_ImageFailed" />
</Border>

The default value for your Border's color, aka BorderBrush, is null, which means you won't see a border unless you specify its color.
Also, you specify a crazy high value for the Image's Margin, which will draw your Image 90 pixels right and 239 under the actual border!
Example for a black border
<Border Name="imgBorder" BorderThickness="2" BorderBrush="Black">
<Image Height="150" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="/ControlsBasics-WPF;component/GalleryImages/Lighthouse.jpg" ImageFailed="image1_ImageFailed" />
</Border>

Why Is The Following WPF Path Cut Off

I have the following code using a WPF Path object. I got the geometry data from Syncfusion MetroStudio 2 which has lots of free icons. However, whenever I try to use them they are cut off. The icon below should show a house but is cut off within the border below. Is there something wrong with my Path?
<Grid>
<Grid.Resources>
<Geometry x:Key="HomeGeometry">M31.427,15.523L53.103,34.871 53.103,59.723C53.088,60.666 52.466,61.263 51.961,61.544 51.426,61.845 50.850,61.972 50.232,61.976L38.688,61.976C38.290,61.976 37.902,61.821 37.619,61.544 37.340,61.272 37.179,60.890 37.179,60.502L37.179,48.548 25.677,48.548 25.677,60.502C25.677,60.890 25.514,61.272 25.235,61.544 24.953,61.821 24.564,61.976 24.167,61.976L12.622,61.976C12.008,61.972 11.428,61.845 10.895,61.544 10.390,61.263 9.767,60.666 9.752,59.723L9.752,34.871z M31.430,0C32.412,0,33.395,0.347,34.172,1.042L61.536,25.469C63.191,26.947 63.306,29.454 61.791,31.072 60.273,32.685 57.703,32.796 56.048,31.319L31.427,9.342 6.806,31.319C6.024,32.015 5.043,32.358 4.067,32.358 2.964,32.358 1.868,31.925 1.065,31.072L1.062,31.066C-0.447,29.454,-0.335,26.945,1.319,25.469L28.686,1.042C29.464,0.347,30.447,0,31.430,0z
</Geometry>
</Grid.Resources>
<Border
Width="50" BorderBrush="LightBlue"
Height="50" BorderThickness="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Focusable="False">
<Path Data="{StaticResource HomeGeometry}" Fill="Red"/>
</Border>

I think what you want is
...
<Path Data="{StaticResource HomeGeometry}" Fill="Red" Stretch="Uniform"/>
...

As we can see, your border is set to Width=50 and Height=50, we clearly see that your icon is larger then that.
Your code should be:
<Border
Width="64" BorderBrush="LightBlue"
Height="64" BorderThickness="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Focusable="False">
<Path Data="{StaticResource HomeGeometry}" Fill="Red"/>
</Border>
EDIT:
Or if you want your icon to be 50x50, do what "500 - internal.." said, it will stretch your icon to 50x50 by adding Stretch="Uniform"