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>
Related
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>
I created my own UserControl (customized loading animation)
I want to scale all components inside of my usercontrol when i put my usercontrol to page. Usercontrol contains ellipses, rectangles and doubleanimation logic.
<UserControl
x:Class="UC_test"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WP_Eq_App"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="200"
d:DesignWidth="200">
<Grid x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<!--<<< Will resize to the size of contents -->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Ellipse x:Name="MainEl" RenderTransformOrigin=".5,.5" Fill="Transparent" HorizontalAlignment="Left" Height="150" StrokeThickness="5" Stroke="Black" VerticalAlignment="Top" Width="150" Margin="0,0,0,0"/>
</Grid>
</UserControl>
please help me for this simple example.
Thank you.
If you want content to automatically scale, you should put it in a ViewBox control.
<UserControl
x:Class="UC_test"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WP_Eq_App"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="200"
d:DesignWidth="200">
<ViewBox>
<Ellipse x:Name="MainEl" RenderTransformOrigin=".5,.5" Fill="Transparent" HorizontalAlignment="Left" Height="150" StrokeThickness="5" Stroke="Black" VerticalAlignment="Top" Width="150" Margin="0,0,0,0"/>
</ViewBox>
</UserControl>
The ViewBox control can have 1 child, so if you want to put more controls in, wrap them in a Grid or StackPanel.
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?
<Window x:Class="TestringWpfApplication1.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="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Background="Yellow"></StackPanel>
<StackPanel Grid.Row="1" Background="Green">
<Button Margin="0,0,0,10000000000">ABC</Button>
</StackPanel>
</Grid>
</Window>
The above code will gives me the situation below:
As you can see, the button was declared at the second StackPanel and hence no matter how I set the margin, the button couldn't go out of the green background. I'm wondering what can I do to declare the button in <StackPanel Grid.Row="1"> and appear partly on <StackPanel Grid.Row="0"> .
In conclusion, how to make an element overflow in it's container and overlap on another container? Is it possible?
Another option would be a RenderTransform.
<Button Content="ABC">
<Button.RenderTransform>
<TranslateTransform Y="-50"></TranslateTransform>
</Button.RenderTransform>
</Button>
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.