Develop Reference

C# WPF changing opacity from canvas in a grid

I have a Canvas in a Grid and the Grid has a opacity of 0.5 but the Canvas in the Grid has a opacity of 1 and its not works both modules have 0.5 opacity. In the Canvas is a Rectangle which should also have an opacity of 1.
<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="450" Width="800" WindowStyle="None" WindowState="Maximized" AllowsTransparency="True" Background="Transparent">
<Grid
x:Name="grid"
MouseDown="Grid_MouseDown"
MouseUp="Grid_MouseUp"
MouseMove="Grid_MouseMove"
Background="Black"
Opacity="0.5">
<Canvas Opacity="1">
<Rectangle
x:Name="selectionBox"
Visibility="Collapsed"
Stroke="White"
StrokeThickness="1"
Opacity="1"/>
</Canvas>
</Grid>
</Window>
This is so far my Code, the opacity in Grid works, but when it comes to Canvas it wont works. The opacity from Canvas/Rectangle stays at 0.5 as with Grid.
I would appreciate any help or suggestion

Any child elements in your grid will be rendered with the opacity of the parent I believe. One way around it is to create a Grid for your black background with opacity of 0.5 and then add the Canvas on top. Put both these inside another grid and set them to the same row making sure the Canvas is the last element.
Hope this is what you needed.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid
x:Name="grid"
Grid.Row="0"
MouseDown="Grid_MouseDown"
MouseUp="Grid_MouseUp"
MouseMove="Grid_MouseMove"
Background="Black"
Opacity="0.5">
</Grid>
<Canvas Grid.Row="0">
<Rectangle
x:Name="selectionBox"
Visibility="Collapsed"
Stroke="White"
StrokeThickness="1"
Opacity="1"/>
</Canvas>
</Grid>

WPF placing a Label at fixed location

I have a WPF window with a Pan and Zoomable Image. Now I want to have a Label that will display the zoom percentage at a fixed location in the window (eg. at center). The position should not be changed even if I Zoom or Pan the photo.
Here is the XAML of my window:
<Window x:Class="ImageViewer.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:ImageViewer"
Name="mainWindow"
mc:Ignorable="d"
Title="MainWindow" WindowStyle="None"
AllowsTransparency="True"
WindowStartupLocation="CenterScreen"
Height="600"
Width="900"
WindowState="Maximized">
<Window.Background>
<SolidColorBrush Opacity="0.5" Color="#FF3C3C6A"/>
</Window.Background>
<Grid>
<local:ZoomBorder x:Name="border" ClipToBounds="True">
<Image Name ="imageContainer"/>
</local:ZoomBorder>
</Grid> </Window>
Now I want to place the following Label in a way that its location never gets changed.
<Label Name ="ZoomLabel" Width="150" Height="50"
Content="100%" HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Background="#FF383838" Foreground="#FFEAE4E4"
FontWeight="Bold" Opacity="0.75" FontSize="30"/>

You will want to add the label in the same row, column as the zoom border in the grid so that it overlays:
<Grid>
<local:ZoomBorder x:Name="border" ClipToBounds="True">
<Image Name ="imageContainer"/>
</local:ZoomBorder>
<Label Name ="ZoomLabel" Width="150" Height="50"
Content="100%" HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Background="#FF383838" Foreground="#FFEAE4E4"
FontWeight="Bold" Opacity="0.75" FontSize="30"
Margin="10,10,0,0"
/>
</Grid> </Window>

MainWindow height\width will be set according current view WPF

I have a question related WPF MVVM- I want that MainWindow height and width will be set according current view height\width.
How can I define it?
MainWindow.xaml
<Window x:Class="Project.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:Project"
xmlns:views ="clr-namespace:Project.Views"
mc:Ignorable="d"
Title="MainWindow"
Height="{Binding Source = {x:Static SystemParameters.PrimaryScreenHeight}, Converter={local:RatioConverter}, ConverterParameter='0.6'}"
Width="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={local:RatioConverter}, ConverterParameter='0.5'}"
>
<Grid>
<ContentControl Name="placeholder"></ContentControl>
</Grid>
</Window>
In One of the views
<UserControl x:Class="Project.Views.MsgBox"
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:local="clr-namespace:Project.Views"
mc:Ignorable="d"
>
<UserControl.Background>
<SolidColorBrush Color="#000000" Opacity="0.5" />
</UserControl.Background>
<Grid Opacity="1" >
<Grid Width="360" Background="White" Opacity="1" Margin="0,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition MinHeight="90" Height="auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
... any code...
</Grid>
</UserControl>

If you want Window to have the same size as its content, set SizeToContent property to WidthAndHeight:
<Window ... SizeToContent="WidthAndHeight">
<Grid>
<ContentControl Name="placeholder"></ContentControl>
</Grid>
</Window>

WPF GridSplitter not being hit-tested?

I seem to run into a strange problem with WPF GridSplitter.
If I do this:
<Window x:Class="WpfApplication20.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="102" />
<RowDefinition Height="1" />
<RowDefinition Height="192" />
</Grid.RowDefinitions>
<GridSplitter Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ResizeDirection="Rows" Background="Black"></GridSplitter>
<Canvas Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue"></Canvas>
<Canvas Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Yellow"></Canvas>
</Grid>
</Window>
I can see the GridSplitter, but I cannot interact with it - mouse over it and cursor does not change and cannot resize rows with it.
Now if I change the order of the elements added to the grid:
<Window x:Class="WpfApplication20.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="102" />
<RowDefinition Height="1" />
<RowDefinition Height="192" />
</Grid.RowDefinitions>
<Canvas Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue"></Canvas>
<Canvas Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Yellow"></Canvas>
<GridSplitter Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ResizeDirection="Rows" Background="Black"></GridSplitter>
</Grid>
</Window>
Then the GridSplitter is working fine.
Note that I put Panel.ZIndex="1" in the first case for the GridSplitter, it will also work.
Then I tried this (added UseLayoutRounding="True" to Window):
<Window x:Class="WpfApplication20.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" UseLayoutRounding="True">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="102" />
<RowDefinition Height="1" />
<RowDefinition Height="192" />
</Grid.RowDefinitions>
<GridSplitter Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ResizeDirection="Rows" Background="Black"></GridSplitter>
<Canvas Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue"></Canvas>
<Canvas Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Yellow"></Canvas>
</Grid>
</Window>
This gives me a strange behaviour: Initially the Gridsplitter is being drawn with a height of 2px (sub-pixel positioning? but all the grid rows are integer height). If I resize the rows upwards, GridSplitter continues to work. If I resize the rows downwards I will get to a point where GridSplitter is being drawn with a height of 1px and once I release the mouse I can no longer interact with the GridSplitter.
Questions:
Why does GridSplitter depend on Z-order to work in the first two cases?
Why does GridSplitter work "intermittently" in the third case?

Placing controls under User Control

I'm new to WPF, and I am creating a user control as follows:
<UserControl x:Class="WpfApplication3.MyUserControl"
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"
x:Name="MyUserControl2"
d:DesignHeight="300" d:DesignWidth="300" Background="Coral">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Content="a" Grid.Row="0"/>
<Button Content="b" Grid.Row="1"/>
<Button Content="c" Grid.Row="2"/>
<ContentPresenter Grid.Row="3"/>
</Grid>
This produces the following layout, when the orange area is the content preseter:
In the main window that uses the user control, I want to inject controls into the content preseter
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication3"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:MyUserControl>
<local:MyUserControl.Content>
<Button Content="d"/>
</local:MyUserControl.Content>
</local:MyUserControl>
</Grid>
I would expect the get the following layout:
but instead the entire user control gets overlapped by button d.
How do I manage to do so?

Try placing button itself in Main Window -
<Grid>
<local:MyUserControl/>
<Button Content="d"/>
</Grid>
OR
<Grid>
<Grid.Resources>
<DataTemplate x:Key="MyContent">
<Button Content="d"/>
</DataTemplate>
</Grid.Resources>
<local:MyUserControl/>
</Grid>
and in your User Control -
<ContentPresenter Grid.Row="3" ContentTemplate="{DynamicResource MyContent}"/>

I'm pretty sure that that won't work. When you set the content of MyControl to the button you're saying that the whole content of the user control should be the Button. I think you need to have a property on your user control then bind the contentpresenter to that.
So Something like MyUserControl.SubContent {get; set;} then you can bind the ContentPresenter to that.