WPF, how to adjust groupbox transparency - wpf

I have a WPF application with a nice background picture. However, when I place some elements to the form I want them to be not so transparent.
For example simple groupbox:
<GroupBox x:Name="LocationGroup" Grid.Column="1" Grid.Row="1" Header="Location" HorizontalAlignment="Left" Height="100" Margin="10,90,0,0" VerticalAlignment="Top" Width="734">
<Grid Margin="1,1,1,1">
<Label Content="Location" HorizontalAlignment="Left" Margin="5,5,0,0" VerticalAlignment="Top"/>
<ComboBox x:Name="LocationCombo" HorizontalAlignment="Left" Margin="5,36,0,0" VerticalAlignment="Top" Width="100"
DisplayMemberPath="LocationDescr" SelectedValuePath="LocationNr" SelectedValue="{Binding Path=Location}">
</ComboBox>
</Grid>
</GroupBox>
I have tried setting the group box (and grid) opacity properties, but it only affects to the label and combo box opacity, not the background.
What I'm looking for is just like the element in the right in the picture linked below:
Opacity example

Here's one way you can achieve it:
<Grid>
<Grid.Background>
<ImageBrush ImageSource="path\to\backgroundimage" Stretch="UniformToFill"/>
</Grid.Background>
<Grid Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" Height="100" Width="400" Margin="10,90,0,0" VerticalAlignment="Top">
<Grid Background="White" Opacity="0.5"></Grid>
<GroupBox x:Name="LocationGroup" Header="Location">
<Grid Margin="1,1,1,1">
<Label Content="Location" HorizontalAlignment="Left" Margin="5,5,0,0" VerticalAlignment="Top"/>
<ComboBox x:Name="LocationCombo" HorizontalAlignment="Left" Margin="5,36,0,0" VerticalAlignment="Top" Width="100"
DisplayMemberPath="LocationDescr" SelectedValuePath="LocationNr" SelectedValue="{Binding Path=Location}">
</ComboBox>
</Grid>
</GroupBox>
</Grid>
</Grid>

Related

How to overlay two gauge controls?

I've set up binding of a double value to an AngularBlockBar control. There are two gauges in the layout, but the AngularBlockBar which is over layed on top of the AngularGauge doesn't show its binding value updating on screen, although valid binding values are being updated to it.
To debug this, I've checked first that the binding value that is bound to the AngularBlockBar is valid and this shows as true by setting a break point.
The binding value shows as valid.
I'm thinking its because of the way the two gauges are over layed over each other, which causes the AngularBlockBar's binding to not show.
Does anyone know what the issue could be here, that prevents the AngularblockBar's binding from being shown on screen?
The layout below is the main user control of the application where the two gauges are over layed. The first gauge updates correctly with a white fill value as shown in the screen shot below. But the AngularBlockBar which has a blue fill value isn't updated
<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:gauges="http://gu.se/Gauges"
xmlns:local="clr-namespace:MyoTestv4"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="MyoTestv4.AdductionAbductionFlexionView"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Viewbox>
<Grid HorizontalAlignment="Left" Height="280" Margin="10,10,0,0" VerticalAlignment="Top" Width="280">
<TextBox HorizontalAlignment="Left" x:Name="statusTbx" Background="#141c28" Foreground="White" BorderBrush="#141c28" Height="30" Margin="0,3,0,0" TextWrapping="Wrap" Text="{Binding CurrentStatus}" VerticalAlignment="Top" Width="75"/>
<TextBox HorizontalAlignment="Left" x:Name="poseStatusTbx" Background="#141c28" Foreground="White" BorderBrush="#141c28" Height="39" Margin="80,4,0,0" TextWrapping="Wrap" Text="{Binding PoseStatus}" VerticalAlignment="Top" Width="75"/>
<TextBox HorizontalAlignment="Left" x:Name="degreeOfAbductionTbx" Background="#141c28" Foreground="White" Height="22" Margin="0,246,0,0" TextWrapping="Wrap" Text="{Binding DegreeStatus}" VerticalAlignment="Top" Width="47"/>
<Label Content="Arc start:" Foreground="#00bdde" HorizontalAlignment="Left" Margin="0,186,0,0" VerticalAlignment="Top" Width="57"/>
<Image HorizontalAlignment="Left" Source="pack://application:,,,/Images/abduction_side_trans.png" x:Name="exerciseImage" Height="100" Margin="0,33,0,0" VerticalAlignment="Top" Width="100"/>
<TextBox HorizontalAlignment="Left" x:Name="painfulArcEndTbx" Background="#141c28" Foreground="White" Height="22" Margin="62,217,0,0" TextWrapping="Wrap" Text="{Binding EndDegreeStatus}" VerticalAlignment="Top" Width="48"/>
<Label Content="Arc end:" Foreground="#00bdde" HorizontalAlignment="Left" Margin="0,217,0,0" VerticalAlignment="Top" Width="57"/>
<TextBox HorizontalAlignment="Left" x:Name="painfulArcStartTbx" Background="#141c28" Foreground="White" Height="23" Margin="62,189,0,0" TextWrapping="Wrap" Text="{Binding StartDegreeStatus}" VerticalAlignment="Top" Width="48"/>
<Grid>
<gauges:AngularGauge
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
IsDirectionReversed="False"
MajorTickFrequency="8"
FontSize="10"
MajorTicks="10"
MaxAngle="0"
Maximum="180"
MinAngle="-180"
Minimum="0"
Style="{StaticResource FatAngular}"
MinorTickFrequency="4"
Value="{Binding DegreeStatus}" Margin="149,2,-89,2" RenderTransformOrigin="0.5,0.5" Height="Auto" Width="Auto"
>
<gauges:AngularGauge.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-89.642"/>
<TranslateTransform/>
</TransformGroup>
</gauges:AngularGauge.RenderTransform>
</gauges:AngularGauge>
<gauges:AngularBlockBar
MaxAngle="180"
Maximum="1"
MinAngle="0"
Minimum="0"
Opacity="0.2"
ReservedSpace="50"
Margin="149,2,-96,0"
TickLength="55"
Fill="DodgerBlue"
Value="{Binding PainfulArcStatus}"
RenderTransformOrigin="0.5,0.5" >
<gauges:AngularBlockBar.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90.711"/>
<TranslateTransform/>
</TransformGroup>
</gauges:AngularBlockBar.RenderTransform>
</gauges:AngularBlockBar>
</Grid>
<TextBlock HorizontalAlignment="Left" x:Name="repCntTblk" Margin="80,43,0,0" TextWrapping="Wrap" Text="" FontSize="38" Foreground="#00bdde" VerticalAlignment="Top" Width="34" Height="41"/>
<Button Content="Submit" x:Name="submitBtn" Command="{Binding Path=DataSubmitCommand}" IsDefault="True" IsCancel="True" HorizontalAlignment="Left" Background="#00bdde" Foreground="White" Margin="0,148,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.76,5.093"/>
</Grid>
</Viewbox>
</UserControl>
The first gauge binding being shown, but the over layed value for the block bar isn't shown.
Don't you need to define Grid.Column and/or Grid.Row on your guage and blockbar other wise they will just lay ontop of eachother?
example with Grid.ColumnDefinitions, you probably want RowDefinitions
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100px"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ComboBox ItemsSource="{Binding NavigationItems}" SelectedItem="{Binding SelectedNavigationItem, Mode=TwoWay}" Grid.Row="0" Grid.Column="0">
</ComboBox>
<ContentControl Content="{Binding SelectedNavigationItem}" Grid.Row="0" Grid.Column="1"/>
</Grid>

Controls are not getting displayed under a groupbox

I have a groupbox in my xaml file containing a Label, Image, DataGrid with two columns, a textbox and progressbar. But when I compile my form and run it, no control from this groupbox is displayed. However controls from other groupboxes are getting displayed.
Here is my my groupbox in xaml :
<GroupBox HorizontalAlignment="Left" Height="400" Margin="25,150,0,0" VerticalAlignment="Top" Width="411" BorderBrush="#FF0788F3" Style="{DynamicResource GroupBoxStyle1}" Grid.RowSpan="2">
<StackPanel Margin="-4,1,-5,-7" RenderTransformOrigin="0.5,0.5">
<Label Content="Text" x:Name="label4" Margin="6,40,242,0" VerticalAlignment="Top" FontFamily="Ebrima" FontSize="16" Padding="5" Background="#FF3053B0" FontWeight="Bold"/>
<Image x:Name="Image" HorizontalAlignment="Left" VerticalAlignment="Top" Width="62" Height="42" Margin="185,-30,0,0" />
<DataGrid x:Name="InstallableGrid" Margin="10,15,0,0" HeadersVisibility="Column" VerticalAlignment="Top" FontSize="14" Height="138" Background="#FFF5F3C7" RowBackground="#FF37AEC9" AlternatingRowBackground="LightBlue" CanUserAddRows="False" KeyboardNavigation.TabNavigation="None" AutoGenerateColumns="True" IsReadOnly="True" VirtualizingPanel.VirtualizationMode="Standard" HorizontalGridLinesBrush="Black" HorizontalAlignment="Left" Width="333" SelectionChanged="InstallableGrid_SelectionChanged">
<DataGrid.Columns>
<DataGridCheckBoxColumn Header="Select" ElementStyle="{StaticResource CheckBoxStyleInverted}" />
</DataGrid.Columns>
</DataGrid>
<TextBox x:Name="PBarTimer" Background="#FFF5F3C7" Foreground="Red" HorizontalAlignment="Left" Height="20" Margin="10,45,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="55" FontSize="14" Padding="1,-1,1,1" RenderTransformOrigin="-0.249,0.84"/>
<ProgressBar x:Name="PBar" Background="#FFF5F3C7" HorizontalAlignment="Left" Height="20" Margin="75,-20,0,0" VerticalAlignment="Top" Width="268" IsIndeterminate="True" RenderTransformOrigin="0.596,0.765"/>
</StackPanel>
</GroupBox>
PS: I am a complete beginner in wpf, I am basically a Linux person so the problem I am committing here could be very silly and I did try googling this problem but could not find any help.

WPF Grid doesn't stretch its height

I want to stretch the Groupbox of this window (height). I am not able to get it working. What am I doing wrong?
What I want is that the groupbox stretches to the height of the window, but that the first column doesn't stretch.
<!-- PLAYER A -->
<Border Grid.Row="0" Grid.Column="0" x:Name="PlayerA" Height="145" VerticalAlignment="Center">
<Grid Height="145" VerticalAlignment="Top">
<GroupBox x:Name="grpPlayerA" Header="Player A" Margin="10,14,0,0" RenderTransformOrigin="0.035,-0.717" Height="127" VerticalAlignment="Top">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Label x:Name="lblArtistA" Content="VENGABOYS" HorizontalAlignment="Left" Margin="3,3,0,0" VerticalAlignment="Top"/>
<Label x:Name="lblTitleA" Content="TO BRAZIL" HorizontalAlignment="Left" Margin="3,27,0,0" VerticalAlignment="Top"/>
<ProgressBar x:Name="prgPlayerA" HorizontalAlignment="Left" Height="15" Margin="5,53,0,0" VerticalAlignment="Top" Width="212"/>
<Image x:Name="imgPlayerA" HorizontalAlignment="Left" Height="62" Margin="220,6,0,0" VerticalAlignment="Top" Width="81"/>
<Button x:Name="btnPlayerAPlay" Content="Play" HorizontalAlignment="Left" Margin="5,79,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="btnPlayerAPauze" Content="Pauze" HorizontalAlignment="Left" Margin="92,79,0,0" VerticalAlignment="Top" Width="74"/>
<Button x:Name="btnPlayerAStop" Content="Stop" HorizontalAlignment="Left" Margin="178,79,0,0" VerticalAlignment="Top" Width="76"/>
</Grid>
</GroupBox>
</Grid>
</Border>
<!-- PLAYER B-->
<Border Grid.Row="0" Grid.Column="1" x:Name="PlayerB">
<GroupBox x:Name="grpPlayerB" Header="Player B" Margin="0,14,16,0" Height="127" VerticalAlignment="Top">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Label x:Name="lblArtistB" Content="VENGABOYS" HorizontalAlignment="Left" Margin="3,3,0,0" VerticalAlignment="Top"/>
<Label x:Name="lblTitleB" Content="TO BRAZIL" HorizontalAlignment="Left" Margin="3,27,0,0" VerticalAlignment="Top"/>
<ProgressBar x:Name="prgPlayerB" HorizontalAlignment="Left" Height="15" Margin="5,53,0,0" VerticalAlignment="Top" Width="212"/>
<Image x:Name="imgPlayerB" HorizontalAlignment="Left" Height="62" Margin="220,6,0,0" VerticalAlignment="Top" Width="81"/>
<Button x:Name="btnPlayerBPlay" Content="Play" HorizontalAlignment="Left" Margin="5,79,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="btnPlayerBPauze" Content="Pauze" HorizontalAlignment="Left" Margin="92,79,0,0" VerticalAlignment="Top" Width="74"/>
<Button x:Name="btnPlayerBStop" Content="Stop" HorizontalAlignment="Left" Margin="178,79,0,0" VerticalAlignment="Top" Width="76"/>
</Grid>
</GroupBox>
</Border>
<!-- HITLIJST -->
<Border Grid.Row="1" Grid.Column="0" x:Name="Hitlijst" VerticalAlignment="Top" Margin="0,0,0,28">
<Grid VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="0*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<GroupBox x:Name="grpPlaylist" Header="Hitlijst" Margin="10,0" Grid.RowSpan="2" Height="275">
<Grid VerticalAlignment="Top">
<ListBox x:Name="lbxHitlijst" Height="242" Margin="10,10,10,0" VerticalAlignment="Top">
<ListBoxItem Background="#FFF55F19" Content="1. Vengaboys - To Brazil (3:19)"/>
<ListBoxItem Background="#FFF91A1A" Content="2. Total Touch - Doo Be La Dee (3:60)"/>
<ListBoxItem Content="3. ATB - 9 PM Till I Come (3:33)"/>
</ListBox>
</Grid>
</GroupBox>
</Grid>
</Border>
<Border Grid.Row="1" Grid.Column="1" x:Name="Info">
<Grid>
<GroupBox x:Name="grpInfo" Header="Info" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top" Height="282" Width="324">
<Grid>
<TextBlock x:Name="txtLyrics" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="Lyrics" VerticalAlignment="Top" Height="119" Width="292"/>
<GroupBox x:Name="grpInfoInfo" Header="Gegevens" HorizontalAlignment="Left" Margin="10,134,0,0" VerticalAlignment="Top" Height="116" Width="292">
<Grid>
<Label x:Name="lblAlbum" Content="ALBUM: Hitzone 1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.149,0.231"/>
<Label x:Name="lblYear" Content="JAAR: 1992" HorizontalAlignment="Left" Margin="10,36,0,0" VerticalAlignment="Top" RenderTransformOrigin="0,0.269"/>
<Label x:Name="lblArtists" Content="ARTIEST(EN): Vengaboys" HorizontalAlignment="Left" Margin="10,62,0,0" VerticalAlignment="Top"/>
</Grid>
</GroupBox>
</Grid>
</GroupBox>
</Grid>
</Border>
<GroupBox x:Name="grpHitlijst" Header="Hitlijst --" Grid.ColumnSpan="2" Grid.RowSpan="2" Margin="0,0,10,10"/>
</Grid>
It would be great to get it working, thanks in advance!
If you want the GroupBox to stretch in height, why is your VerticalAlignment Top? Switch it to Stretch and it should work.
Please refer to this note:
WPF Groupbox height needs to change dynamically?
bottom line - set width and height to "Auto" (delete the values that they have),
and set the VerticalAlignment / Horizontal one if you need it too to "Stretch"

I unable to get child control from ListBox control in WPF using MVVM

I am in serious trouble. I have listbox control in which i have many combo box. whenever select the value in combo box, i have to make other controls as hidden. i am using MVVM pattren. i am unable to get the child controls from ListBox control but i can get the ListBox control in viewmodel. How can i get these controls in viewmodel? Is it possible? I am using framework 4.0. i have shown the code below which write in view.
<ListBox x:Name="lstItems" MaxHeight="300" FontSize="11" Margin="12,0,20,38" ItemsSource="{Binding Source={StaticResource listedView}, Path=myItemsSource, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
<ListBox.ItemTemplate >
<DataTemplate>
<Border BorderBrush="Blue" Margin="0,4,0,4" BorderThickness="1" CornerRadius="5">
<StackPanel Orientation="Horizontal">
<Label Content="Show rules where:" Name="lblshowrules"></Label>
<ComboBox x:Name="cboShowRuleWhere" Height="20" Width="200" ItemsSource="{Binding Source={StaticResource listedView}, Path=FilterRules}" DisplayMemberPath="RuleName" SelectedValuePath="RuleId" SelectedValue="{Binding Source={StaticResource listedView}, Path=SelectedRuleName, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" ></ComboBox>
<Grid Height="29" HorizontalAlignment="Left" Name="grid1" VerticalAlignment="Top" Width="496" Grid.Row="1" Margin="0,0,0,0">
<ComboBox Height="21" HorizontalAlignment="Left" Margin="6,4,0,0" x:Name="cboRuleCondtion" VerticalAlignment="Top" Width="212" />
<TextBox Height="20" HorizontalAlignment="Left" Margin="242,3,0,0" x:Name="txtValue" VerticalAlignment="Top" Width="245" Visibility="Hidden"/>
<ComboBox Height="21" HorizontalAlignment="Left" Margin="224,3,0,0" x:Name="cboValue" VerticalAlignment="Top" Width="205" Visibility="Hidden" />
<DatePicker Height="28" HorizontalAlignment="Left" Margin="242,-3,0,0" x:Name="dtpFromDate" VerticalAlignment="Top" Width="98" Visibility="Hidden" />
<DatePicker Height="31" HorizontalAlignment="Left" Margin="346,-3,0,0" x:Name="dtpToDate" VerticalAlignment="Top" Width="98" Visibility="Hidden"/>
</Grid>
<Button Name="cmdAddLevel" Padding="0" Margin="-1,1,0,-1" Width="75" Command ="{Binding Source={StaticResource listedView}, Path=AddLevelCommand, UpdateSourceTrigger=PropertyChanged}" BorderBrush="White" BorderThickness="1" Height="25" HorizontalContentAlignment="Center">
<StackPanel Orientation="Horizontal">
<Image Height="16" Width="16" HorizontalAlignment="Left" Margin="1,0,0,-1">
</Image>
<TextBlock Text="Add Level" FontWeight="Bold" Height="16" Width="70" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="8,2,0,-1" />
</StackPanel>
</Button>
<Label Name="lblDeleteLevel" Margin="3,0,0,0" Width="75" TabIndex="7" HorizontalAlignment="Left">
<Hyperlink >
<TextBlock Text="Delete Level" />
</Hyperlink>
</Label>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
Please help me. once again, i want to know how to get the child control from parent control... Is it possible?
Using the MVVM pattern, you should not be referencing any of the controls directly. Alternatively, you should create a boolean property on your viewmodel that decides if various controls should be visible. Then bind the Visibility property of the controls you want to hide to this property, using a converter.
See this previous Q/A for details on visibility converters: Link

Can't get focus on a TextBox inside a ListBox using Silverlight

I'm having a little trouble in silverlight with a databound ListBox containing databound TextBox elements. The items display correctly in the list and the TextBox is populated correctly but I can't get focus on the TextBox in the list. If I hover over the edges of the TextBox it highlights but it won't let me click into it to edit the text. Any ideas?
My XAML looks like this:
<ListBox x:Name="listImages">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="LayoutRoot" Background="White">
<Image Height="102" HorizontalAlignment="Left" Name="imgThumb" Stretch="UniformToFill" VerticalAlignment="Top" Width="155" Source="{Binding ImageFilename, Converter={StaticResource ImageConverter}}" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="154,25,0,0" Name="txtAltText" VerticalAlignment="Top" Width="239" Text="{Binding Alt}" />
<dataInput:Label Height="19" HorizontalAlignment="Left" Margin="154,6,0,0" Name="lblAltText" VerticalAlignment="Top" Width="239" Content="Alt Text" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I swapped the content for this and it now works, I think it was having an issue with the Grid container:
<ListBox x:Name="listImages">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="102" HorizontalAlignment="Left" Name="imgThumb" Stretch="UniformToFill" VerticalAlignment="Top" Width="155" Source="{Binding ImageFilename, Converter={StaticResource ImageConverter}}" Margin="5" />
<StackPanel>
<dataInput:Label Height="19" HorizontalAlignment="Left" Name="lblAltText" VerticalAlignment="Top" Width="239" Content="Alt Text" />
<TextBox Height="23" HorizontalAlignment="Stretch" Name="txtAltText" VerticalAlignment="Top" Text="{Binding Alt}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Resources