WPF make container background not wash out the contents of children - c#

Simple code:
<UserControl x:Class="MonitravLite.UserControls.Foo"
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:MonitravLite.UserControls"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<StackPanel>
<!-- 1st example with setting background -->
<Grid Background="Blue" Opacity="0.5">
<TextBlock Text="Grid background"/>
</Grid>
<!-- 2nd example with grid on top-->
<Grid>
<TextBlock Text="Grid on top"/>
<Grid Background="Blue" Opacity="0.5"/>
</Grid>
</StackPanel>
I have various child controls that display states. When any of these children are in a error state, I want the background of the of the container to change color. e.g..e. if one of the children is in an error state, the background should be red.
However if I set the container background (grid in this example), it washes out the children.
If I do the second approach and lay a grid over the top - this doesn't happen?
I have tried setting the Panel.Zindex, but this doesn't help.
What am I missing to make the first example render like the second?

if you set the opacity of the grid all its children will inherit this property and become transparent as well! So instead of making the grid transparent choose a transparent color as a background.
instead of this line:
<Grid Background="Blue" Opacity="0.5">
try this:
<Grid Background="#7f0000FF">

Related

How to add multiple content control on same window [duplicate]

Problem:
XAML file:
<Window
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"
xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" x:Class="WpfApp1.MainWindow"
mc:Ignorable="d"
Title="Test" Height="398.775" Width="782" BorderBrush="Black" Margin="0" IsTabStop="True">
<Window.TaskbarItemInfo>
<TaskbarItemInfo/>
</Window.TaskbarItemInfo>
<TextBox HorizontalAlignment="Left" Height="23" Margin="268,290,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
</Window>
A Window is a ContentControl. These have a Content property to display a single item. If you want to display multiple items, use one of the following built-in layout panels and drag them onto your window. Then you can add multiple controls to them.
Grid
StackPanel
WrapPanel
DockPanel
UniformGrid
Canvas
Because you're on the window who only accepts 1 element, you need first add a content controller .
It can be:
Grid
Canvas
Dock Panel
StackPanel
WrapPannel
Scroll viewer
Add <grid> </grid> in Window tag then you can add your controls in it.

Desire specific size of Visual Studio 2019 Extension ToolWindow ( WPF UserControl )

I am looking to get a fix size windows because of content that I am showing. I am struggling because when the extension is run the size of windows is crop to a fix size. The simple example is just modified the default and try to make it 800x600 window. Once the window is up on screen, you can manual adjust and next time it will be fine but I wish to make sure the default is correct.
I seen other questions about like not having fix size and such and nothing seems to work. I understand if user changes the size smaller than it will be that may - but I would like default size to be bigger
<UserControl x:Class="VSIXProject1.ToolWindow1Control"
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:vsshell="clr-namespace:Microsoft.VisualStudio.Shell;assembly=Microsoft.VisualStudio.Shell.15.0"
Background="{DynamicResource {x:Static vsshell:VsBrushes.WindowKey}}"
Foreground="{DynamicResource {x:Static vsshell:VsBrushes.WindowTextKey}}"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="800"
Name="MyToolWindow">
<Grid MinWidth="800" MinHeight="600">
<StackPanel Orientation="Vertical" Width="800" Height="600">
<TextBlock Margin="10" HorizontalAlignment="Center">ToolWindow1</TextBlock>
<Button Content="Click me!" Click="button1_Click" Width="120" Height="80" Name="button1"/>
</StackPanel>
</Grid>
Source Image
Problem Image
I try following code in Package class as recommended
[ProvideToolWindow(typeof(ToolWindow1),
Width =800,
Height =600,
Style = Microsoft.VisualStudio.Shell.VsDockStyle.AlwaysFloat)]
You can stipulate the initial size of a toolwindow by setting the Width and Height properties, via the ProvideToolWindowAttribute, used to register your toolwindow. Toolwindows are "sticky", with the position, size, dockstate etc being persisted with your other window layout options. Meaning, once the user resizes/docs/floats the toolwindow, it's state gets saved. But you can readily reset it back to the default, using the Windows | Reset Window Layout menu command.
Sincerely,
Hi you can set the Window size in this way
<UserControl x:Class="VSIXProject1.ToolWindow1Control"
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:vsshell="clr-namespace:Microsoft.VisualStudio.Shell;assembly=Microsoft.VisualStudio.Shell.15.0"
Background="{DynamicResource {x:Static vsshell:VsBrushes.WindowKey}}"
Foreground="{DynamicResource {x:Static vsshell:VsBrushes.WindowTextKey}}"
MinWidth = "800"
MinHeight = "600"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="800"
Name="MyToolWindow">
Set the MinWidth and MinHeight will ensure that window will never go under that dimension

WPF Force UserControl to expand to fill maximal render size

I need to create a UserControl, which is hosted within a "parent" ContentControl who is set with "Center" Horizontal and Vertical alignment.
This control hosts another "child" UserControl, which I would like to be as big as it can get without stretching over the render-able size.
I noticed that if I set the child's size to be bigger than the render-able size, i get the size I want as a "DesiredSize" property on that control.
However I don't see how can I get that information without oversizing the control.
I've created this sample to illustrate the situation, I want "ChildControl"'s pink background to stretch over the entire window.
Just to clarify, I only have control on "ControlableElementA" and "ControlableElementB"
I cannot bind to the main window, in the actual application I use this as an embedded window with varying levels of hierarchy in between..
The "ChildControl" and "ParentControl" are beyond my reach due to constraints above me.
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="300" Width="300">
<Grid>
<ContentControl Name="ParentControl" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid Name="ControlableElementA" Background="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ContentControl Name="ControlableElementB">
<Grid Name="ChildControl" Background="Pink" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button Width="30" Height="30"></Button>
</Grid>
</ContentControl>
</Grid>
</ContentControl>
</Grid>
</Window>
Thanks ahead, I apologize if the description is a little cryptic
HorizontalAlignment and VerticalAlignment as Stretch means "Stretch to the maximum size within the bounds of the parent container."
However, your parent container is set to Center, which means your UserControl effectively has an Auto width and height.
To fix this, simply remove:
HorizontalAlignment="Center" VerticalAlignment="Center"
From the ContentControl.

How to change ViewPort3D background color in WPF?

i have viewport3d and i want to change its background color.
i am very new to Wpf. i didnt understand what to do from other posts. so i ask here.
i changed brush property for viewport3d but it does nothing
<Window x:Class="W3DTinker.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="800" Width="1200">
<Grid HorizontalAlignment="Left" Height="780" Margin="10,10,0,-21" VerticalAlignment="Top" Width="1180">
<Viewport3D Grid.Row="0" Grid.Column="0" x:Name="Viewport" Margin="350,10,10,10" OpacityMask="{DynamicResource {x:Static SystemColors.AppWorkspaceBrushKey}}" />
</Grid>
Viewport3D is a control that creates a 3D scene for you to render things into. It does not display anything by itself. If you want a background color behind it, then set the background color on its parent control, which in your case is the Grid that contains it.

How to center the image control inside Grid?

There is one Grid and I drop an Image control into the Grid.
What I do : just simply change both the property-HorizontalAlignment and VerticalAlignment to 'Center'.
However the image control performs strangely unlike other controls do. This Image control center itself according to its upper left corner like below :
I want to know why it performs in this way?
EDIT
Here is my XAML:
<UserControl x:Class="Entity.WPF.Controls.ShopProfile"
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="600" d:DesignWidth="780">
<Grid>
<DockPanel >
<Grid>
<Image HorizontalAlignment="Center" Height="100" Margin="0" VerticalAlignment="Center" Width="100"/>
</Grid>
</DockPanel>
</Grid>
And if I set margin like Margin="-50,-50,0,0",it is centered actually,but why other controls don't need this setting?
That's interesting, I'm not sure why that happens, or if it's documented somewhere.
To answer your question, how to center the image control inside a grid, just remove those properties and the image will be centered in the grid automatically.
<Grid>
<Image Height="100" Margin="0" Width="100" />
</Grid>

Categories