I have a rectangle that I dynamically draw in a Window. Said Window has a background with it's opacity set to 0.4.
I'd like to make the area inside the rectangle completely transparent (see what's behind the window).
Is there any way to do that ?
Here is the code of my Window :
<Window x:Class="TakeAScreenzone"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="PloofTAS" Height="355" Width="539" Topmost="True"
ResizeMode="NoResize" AllowsTransparency="True"
ShowInTaskbar="False" ShowActivated="True" WindowStyle="None" Background="#66FFFFFF" >
<Grid Name="Grid1"></Grid>
</Window>
And Here the code I use to draw my rectangle (Where Grid1 is the Main grid of my window):
WorkingRectangle = New Rectangle
WorkingRectangle.Stroke = New SolidColorBrush(Colors.Red)
WorkingRectangle.StrokeThickness = 1
WorkingRectangle.Fill = Nothing
WorkingRectangle.HorizontalAlignment = Windows.HorizontalAlignment.Left
WorkingRectangle.VerticalAlignment = Windows.VerticalAlignment.Top
Grid1.Children.Add(WorkingRectangle)
I believe, you can utilize the following approach (here I've created a rectangular hole at the center of window):
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="PloofTAS" Height="355" Width="539" Topmost="True"
ResizeMode="NoResize" AllowsTransparency="True"
ShowInTaskbar="False" ShowActivated="True" WindowStyle="None" Background="Transparent">
<Grid Name="Grid1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Fill="#66FFFFFF" Grid.Column="0" Grid.RowSpan="3"/>
<Rectangle Fill="#66FFFFFF" Grid.Column="2" Grid.RowSpan="3"/>
<Rectangle Fill="#66FFFFFF" Grid.Column="1" Grid.Row="0"/>
<Rectangle Fill="#66FFFFFF" Grid.Column="1" Grid.Row="2"/>
<Rectangle x:Name="workingRectangle" Fill="Transparent" Stroke="Red" Grid.Column="1" Grid.Row="1"/>
</Grid>
</Window>
Make the inner rectangle an Opacity Mask.
Related
Just, tried to add the second button onto GroupBox, knowing that it's GroupBox after all and was surprised that is not allowed by WPF. Am I right?
<Window x:Class="WpfApplication2.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:WpfApplication2"
mc:Ignorable="d"
Title="MainWindow" Height="768" Width="1024" MinHeight="768" MinWidth="1024" MaxHeight="1080" MaxWidth="1920">
<Grid x:Name="Grid_1" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="80*"/>
<RowDefinition Height="512*"/>
<RowDefinition Height="160*"/>
</Grid.RowDefinitions>
<Image x:Name="image" Grid.Row="1" Source="Resources/truck.png" />
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="112*"/>
<ColumnDefinition Width="247*"/>
<ColumnDefinition Width="247*"/>
<ColumnDefinition Width="247*"/>
<ColumnDefinition Width="118*"/>
</Grid.ColumnDefinitions>
<GroupBox x:Name="groupBox1" Header="Truck1" FontSize="16" Background="BlanchedAlmond" Grid.Column="1" >
<Button x:Name="button" Content="Start1" HorizontalAlignment="Left" Margin="154,6,0,0" VerticalAlignment="Top" Width="75"/>
</GroupBox>
<GroupBox x:Name="groupBox2" Grid.Column="2" Header="Truck2" FontSize="16" Background="BlanchedAlmond" />
<GroupBox x:Name="groupBox3" Grid.Column="3" Header="Truck3" FontSize="16" Background="BlanchedAlmond" />
</Grid>
</Grid>
I have rectangle below which mission is to overlay above all other controls in the grid:
<Grid>
<Rectangle x:Name="TopPanel" Grid.ZIndex="3" Opacity="0.5">
<Rectangle.Fill>
<ImageBrush ImageSource="./Resources/Loader_128x128.gif" AlignmentX="Center" AlignmentY="Center" Stretch="None" />
</Rectangle.Fill>
</Rectangle>
<!-- Controls -->
</Grid>
I would like this rectangle to have in its center (X,Y) an image and under the image (also centered in horizontal) a text saying "Loading..." The image I have put is an animated gif.
How can I do this? I am only interested in XAML, not c# code.
Another problem I have is that my gif is not being animated. Why? In order to make gif animation work, I do not want to use extra packages.
Am not sure you can place animated gif inside ImageBrush(you will see the image but not the animation), if you dont want Code or external packages(i recommend you use external packages) you need to use MediaElement.
I removed the rectangle because i didn't understand why you need it from your description.
<Window x:Class="wpftest.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:wpftest"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Border Opacity="0.5" Grid.ZIndex="3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<MediaElement Height="300" Width="300"
Source="c:\us\Resources\loader.gif"
LoadedBehavior="Play"
Stretch="Uniform" SpeedRatio="1" IsMuted="False" />
<TextBlock Grid.Row="1" Text="Loading..." HorizontalAlignment="Center"/>
</Grid>
</Border>
<!-- Controls -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox/>
<Label Grid.Row="1" Content="Some Label"></Label>
<TextBox Grid.Row="2"/>
</Grid>
</Grid>
About the animated gif's:
AFAIK it is not supported directly, you'll need a library.I use a library called WpfAnimatedGif. You'll find it on nuget https://www.nuget.org/packages/WpfAnimatedGif/
After installing it, something like :
<Image gif:ImageBehavior.AnimatedSource="./Resources/Loader_128x128.gif"/>
sould do the job.
kojan is right the problem with the gif it will animate only once so you can use also animation storyboard... (you can put the loading spinner container after the controls and don't use zindex)
<Window x:Class="wpf.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:wpf"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid>
<UniformGrid Columns="1">
<Button Content="Don't" Background="Blue"/>
<Button Content="DownGrade Me" Background="White"/>
<Button Content="Please" Background="Blue"/>
</UniformGrid>
</Grid>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<MediaElement Name="MySimpsons" Source="C:\Users\CodeValueUser\documents\visual studio 2015\Projects\wpf\wpf\homer-simpson-animated-gif-4.gif" Stretch="UniformToFill" LoadedBehavior="Play" />
<TextBlock x:Name="CollapsedGif" Grid.Row="1" Text="You'll Downgrade Me i'll downgrade you!!!...." Background="Red" HorizontalAlignment="Stretch"/>
<Grid.Style>
<Style TargetType="Grid">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Visibility" Value="Collapsed" />
</Trigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
</Grid>
</Window>
enter image description here
Hi i have designed a usercontrol for using as an pop up and i have set the usercontrol background property as transperent but the background is not getting transperent
I need that light orange to be transparent
and here is my xaml code of user control
<UserControl
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:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="WPFTest.UCToolTip"
mc:Ignorable="d" Height="231.493" Width="362.075"
Background="Transparent" >
<UserControl.Resources>
<Style TargetType="{x:Type Hyperlink}">
<Setter Property="TextBlock.TextDecorations" Value="{x:Null}" />
</Style>
</UserControl.Resources>
<Grid Margin="10,0,0,0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Background="Orange" Margin="0,0,0,33">
<!--Your content here-->
</Grid>
<Polygon
Points="0,0 15,0, 0,30" Stroke="Orange" Fill="Orange" Margin="0,198,0,1" />
</Grid>
The problem seems to be that you're using the Grid incorrectly. You need to specify which row the items are in, and once you do that, you don't need all those margins. And your first row needs to have Height="Auto" so it expands to fit the content within it.
<Grid>
<Grid Margin="10,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Orange" Margin="0,0,0,0" >
<Label>My Content</Label>
</Grid>
<Polygon
Grid.Row="1"
Points="0,0 15,0, 0,30"
Stroke="Orange"
Fill="Orange"
Margin="0,0,0,1" />
</Grid>
</Grid>
I have a button on a window that sizes to the window. I have put a grid inside the button with one row and two columns, and put a path in first column, and a textbox in the second.
My problem is I can't get the grid to stretch with the button.
Here is what is happening:
Here is what I want to happen:
I have the grids HorizontalAlignment="Stretch", yet it is not stretching.
What am I doing wrong here?
Here is the code:
<Window x:Class="GridInButtonIssue.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:GridInButtonIssue"
mc:Ignorable="d"
Title="MainWindow" Height="136.5" Width="269.839">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="btn_SelectMode" Grid.Row="0" Margin="0,35,0,0" >
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Canvas x:Name="svg2" Grid.Column="0" Width="25" Height="25" HorizontalAlignment="Center">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas x:Name="layer1">
<Canvas.RenderTransform>
<TranslateTransform X="-298.50531" Y="-576.33075"/>
</Canvas.RenderTransform>
<Ellipse xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="298.6" Canvas.Top="576.4" Width="19.9" Height="19.9" x:Name="path4144" Fill="#FF951718" StrokeThickness="0.14452878" Stroke="#FFFD0000" StrokeMiterLimit="4" StrokeLineJoin="Miter" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" Opacity="1"/>
</Canvas>
</Canvas>
<TextBlock Grid.Column="1" Text="Test Button" HorizontalAlignment="Left" />
</Grid>
</Button>
</Grid>
</Window>
You have to set the HorizontalContentAlignment to Strech on the Button directly like so:
<Window x:Class="GridInButtonIssue.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:GridInButtonIssue"
mc:Ignorable="d"
Title="MainWindow" Height="136.5" Width="269.839">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="btn_SelectMode" Grid.Row="0" Margin="0,35,0,0" HorizontalContentAlignment="Stretch" >
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Canvas x:Name="svg2" Grid.Column="0" Width="25" Height="25" HorizontalAlignment="Center">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas x:Name="layer1">
<Canvas.RenderTransform>
<TranslateTransform X="-298.50531" Y="-576.33075"/>
</Canvas.RenderTransform>
<Ellipse xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="298.6" Canvas.Top="576.4" Width="19.9" Height="19.9" x:Name="path4144" Fill="#FF951718" StrokeThickness="0.14452878" Stroke="#FFFD0000" StrokeMiterLimit="4" StrokeLineJoin="Miter" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" Opacity="1"/>
</Canvas>
</Canvas>
<TextBlock Grid.Column="1" Text="Test Button" HorizontalAlignment="Left" />
</Grid>
</Button>
</Grid>
</Window>
So it looks like this:
Ok, so I'm developing a C# WPF Application. The MainWindow for this app is always fullscreen, but I need to adjust the controls based on resolution. Anyway, I have tried quite a few things to achieve this. Right now, I have set the Grid length & width to Auto. The problem is that my controls shift up and to the left for some reason. Below is my MainWindowXAML. (BTW: The window contains: Image buttons, Labels, Rectangles, and TextBoxes):
<Window x:Name="Menu" x:Class="App.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="App1" FontWeight="Bold" Icon="Images/Core-IconSize.ico" WindowStartupLocation="CenterScreen" WindowStyle="ThreeDBorderWindow" WindowState="Maximized" ResizeMode="CanMinimize" Height="870" Width="1388">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
//Controls here.
</Grid>
</Window>
Edit: Added XAML for controls.
It sounds like you want your controls to scale up or down if the screen size is different; rather than just shift positions.
If this is what you want, you can achieve this effect by putting your Grid inside a Viewbox control. The Viewbox will then automatically scale it's contents up or down to fit the existing real estate.
Also, you may want to remove the height and width properties from your window as they are redundant for a full-screen application. If you want a specific size while you are editing the window in XAML, you can set the designheight and designwidth properties.
Example without the Viewbox:
<Window x:Class="MVVM_Exploration.Windows.wndDataGrid"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="wndDataGrid" Height="300" Width="500">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Button Content="Load Text File" HorizontalAlignment="Left"
Margin="10" Click="LoadTextFile"/>
<Button Content="Save Text File" HorizontalAlignment="Left"
Margin="10" Click="SaveTextFile"/>
</StackPanel>
<TextBlock Grid.Row="1" Text="Some content here"/>
<Button Content="Another Button" Grid.Row="2"
HorizontalAlignment="Left"/>
</Grid>
</Window>
Example with the Viewbox:
<Window x:Class="MVVM_Exploration.Windows.wndDataGrid"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="wndDataGrid" Height="300" Width="500">
<Viewbox>
<Grid Width="200" Height="100">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Button Content="Load Text File" HorizontalAlignment="Left"
Margin="10" Click="LoadTextFile"/>
<Button Content="Save Text File" HorizontalAlignment="Left"
Margin="10" Click="SaveTextFile"/>
</StackPanel>
<TextBlock Grid.Row="1" Text="Some content here"/>
<Button Content="Another Button" Grid.Row="2"
HorizontalAlignment="Left"/>
</Grid>
</Viewbox>
</Window>
Depending on how your grid and it's contents are set up, you may not need to give the actual grid a defined size.