Control as background of Grid - silverlight

I have a grid, and I need to have a control as background of this grid. This control will be a progressbar, but it's my problem how to create it.
I can't find how can I set a control as background of grid.
Have you got any experience with this kind of problem?
<DataTemplate x:Key="TodoItemWeeklyTemplate">
<Grid MinWidth="800" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top" Source="{Binding Occurrence.Appointment.Icon, Converter={StaticResource imgConverter}}" Width="16" Height="16" Stretch="Fill" />
<TextBlock Grid.Column="1" HorizontalAlignment="Left" MaxWidth="130" Text="{Binding Occurrence.Appointment.Subject}" />
</Grid>
</DataTemplate>

Here is how I would do it:-
<Grid MinWidth="800">
<Rectangle x:Name="Background" Fill="Green" Width="{Binding PercentDone, Converter={StaticConverter WidthConv}, ConverterParameter=800}" HorizontalAlignment="Left" />
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top" Source="{Binding Occurrence.Appointment.Icon, Converter={StaticResource imgConverter}}" Width="16" Height="16" Stretch="Fill" />
<TextBlock Grid.Column="1" HorizontalAlignment="Left" MaxWidth="130" Text="{Binding Occurrence.Appointment.Subject}" />
</Grid>
</Grid>
Where WidthConv is an instance of a class added to the usercontrol resources that implements IValueConverter. The Convert method would take the input percentage value and apply it to the parameter to return the width the rectangle needs to be to represents that percentage value.
The important point here is that Grid naturaly overlays elements on each other when the occupy the same area.

You cannot set a control as a background as it is of Brush Type.
But if you want to emulate that you can put your Grid in another one like that :
<Grid>
<Grid>
<!-- put your Content here -->
</Grid>
<ProgressBar />
</Grid>

Related

Textbox doesn't fit to its content size in an expander

I have a Xaml view where I'm trying to display Textbox inside a grid which is inside an Exander.
<Expander DataContext="{Binding DiagnosticCategories[0].DiagnosticResults[0]}" <!-- For the test -->
Background="Transparent"
Foreground="{StaticResource ActiveForegroundBrush}"
IsExpanded="False">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<StackPanel
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Top">
<TextBox
Margin="10"
Background="Transparent"
BorderThickness="0"
FontSize="13"
FontWeight="Light"
Foreground="{StaticResource ActiveForegroundBrush}"
IsReadOnly="True"
Opacity="0.8"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
SelectionBrush="Black"
Text="{Binding FormatedParameters, Mode=OneWay}"
TextWrapping="Wrap" />
</StackPanel>
[...]
</Grid>
</Expander>
However, there is a problem with the Textbox which has a anormal height even if my text is just "aa"...
First, I thought that the problem was with the Grid.Row and the Textbox only fit it so I tried to add a StackPanel which doesn't fit the Grid.Row but it doesn't work. It seems that the problem is in the textbox.
With a TextBlock, I don't have this problem but I need the Textbox to display my text.
You can try RichTextBox.
When I want to use TextBox, I have the same problem under a certain height. I solved the problem by using RichTextBox instead of TextBox.
<Expander DataContext="{Binding DiagnosticCategories[0].DiagnosticResults[0]}" <!-- For the test -->
Background="Transparent"
Foreground="{StaticResource ActiveForegroundBrush}"
IsExpanded="False">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<StackPanel
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Top">
<RichTextBox
Margin="10"
Background="Transparent"
BorderThickness="0"
FontSize="13"
FontWeight="Light"
Foreground="{StaticResource ActiveForegroundBrush}"
IsReadOnly="True"
Opacity="0.8"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
SelectionBrush="Black"
Text="{Binding FormatedParameters, Mode=OneWay}"
TextWrapping="Wrap" />
</StackPanel>
[...]
</Grid>
</Expander>
As others mentioned, I'm a little unsure what you are trying to achieve. I added a couple of horizontal and vertical layouts to your example:
<Expander DataContext="{Binding DiagnosticCategories[0].DiagnosticResults[0]}"
Background="Yellow" HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="200"
IsExpanded="False">
<Grid Margin="10" Background="Blue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<StackPanel
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Top">
<TextBox
Margin="10"
Background="Orange"
BorderThickness="0"
FontSize="13"
FontWeight="Light"
IsReadOnly="True"
Opacity="0.8"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
SelectionBrush="Black"
Text="Test Text"
TextWrapping="Wrap"
/>
</StackPanel>
</Grid>
</Expander>
And I get the following:
Closed:
Open:

Settings Visibility of Grid Hides Another Grid

I have two grid controls sitting within the same row of a parent grid.
<Grid x:Name="grdTimelinePlusControls" Grid.Row="1" Grid.ColumnSpan="3">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ProgressBar x:Name="pgbVideoTimeline" HorizontalAlignment="Stretch" Height="7" Background="{StaticResource SecondaryColour}" Foreground="Maroon" BorderThickness="0" Style="{StaticResource ExpandContractTimeline}" Grid.Row="1" MouseDown="pgbVideoTimeline_MouseDown" MouseMove="pgbVideoTimeline_MouseMove" MouseUp="pgbVideoTimeline_MouseUp" />
<Grid x:Name="grdControls" Grid.Row="2" Background="{StaticResource BackgroundColour}" Height="40" Style="{StaticResource ExpandHideControls}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel x:Name="stpPlaybackControls" Orientation="Horizontal" HorizontalAlignment="Left" Grid.Column="0">
<Image x:Name="btnPlayPause" Height="30" Margin="10,5,5,5" ToolTip="Play" Source="Resources/Images/UI/Play.png" MouseEnter="buttonHover_MouseEnter" MouseLeave="buttonHover_MouseLeave" MouseUp="btnPlayPause_MouseUp" />
<Image x:Name="btnReplay" Height="30" Margin="5" ToolTip="Replay" Source="Resources/Images/UI/Replay.png" MouseEnter="buttonHover_MouseEnter" MouseLeave="buttonHover_MouseLeave" MouseUp="btnReplay_MouseUp" />
</StackPanel>
<StackPanel x:Name="stpMiscControls" Orientation="Horizontal" HorizontalAlignment="Right" Grid.Column="1">
<Slider x:Name="slrSpeed" Width="100" Margin="5,10,5,5" VerticalAlignment="Top" Minimum="1" Maximum="5" Value="3" LargeChange="1" IsSnapToTickEnabled="True" ValueChanged="slrSpeed_ValueChanged" />
<Image x:Name="btnOpen" Height="30" Margin="5" ToolTip="Open" Source="Resources/Images/UI/Open.png" MouseEnter="buttonHover_MouseEnter" MouseLeave="buttonHover_MouseLeave" />
<Image x:Name="btnFullScreen" Height="30" Margin="5" ToolTip="Fullscreen" Source="Resources/Images/UI/FullScreen.png" MouseEnter="buttonHover_MouseEnter" MouseLeave="buttonHover_MouseLeave" MouseUp="btnFullScreen_MouseUp" />
<Image x:Name="btnSettings" Height="30" Margin="5,5,10,5" ToolTip="Settings" Source="Resources/Images/UI/Settings.png" MouseEnter="buttonHover_MouseEnter" MouseLeave="buttonHover_MouseLeave" />
</StackPanel>
</Grid>
</Grid>
<Grid x:Name="grdWorkingTime" Grid.Row="1" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ProgressBar x:Name="pgbWorkingTime" Background="{StaticResource BackgroundColour}" BorderBrush="{StaticResource ForegroundColour}" Width=500 Foreground="Maroon" Margin="5" />
</Grid>
I only intend to show one of grdTimelinePlusControls and grdWorkingTime at a time and with the code as it is above I see both a progressbar (pgbWorkingTime) over the top of the various images I have on the two StackPanels. However when I change the opening tag of grdTimelinePlusControls to be:
<Grid x:Name="grdTimelinePlusControls" Grid.Row="1" Grid.ColumnSpan="3" Visibility="Collapsed">
It stops either grid from showing and I can't understand why. It seems like grdWorkingTime must be a child of grdTimelinePlusControls somehow but I cant see it, the document outline also shows them at the same level.
This is obviously not all of the code on my page but I wanted to keep it readable... The full page is here
Is there any particular reason that the two grids are in the same parent grid's row? If you place them in two separate rows with <RowDefinition Height="Auto" /> the 'unused' row should collapse together with the corresponding child grid as you don't intend to show them together at the same time.

Complex controls in a Popup

I am building a control allowing to manage some items and select one.
It comprises a TextBox and a Button allowing to open a Popup where it all happens.
I would like to have a list of items with details in a System.Windows.Controls.Primitives.Popup class. I am using a Grid with 2 columns, the first one contains the list of items, the second one its details.
Now I want to use a System.Windows.Controls.GridSplitter control to allow the user to resize the area of details.
The problem is that this works everywhere except of inside a Popup control.
My question is, should I use some other control simulating Popup's behavior (Window..) or is there any other way to achieve this.
EDITED:
If I set Width Property of the Popup it works, because the Popup is not trying to adapt to its content. But I want to preserve this behaviour..
What I'm planning is to add complex animations to the controls in the Popup as well.
CODE:
...
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBox Grid.Column="0" Grid.Row="0" Text="Selected Item" />
<ToggleButton Grid.Row="0" Grid.Column="1" Focusable="False">
<Grid>
<TextBlock Text="Select" />
<Popup StaysOpen="False" Width="700" VerticalAlignment="Bottom" IsOpen="{Binding Path=IsChecked,
RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ToggleButton, AncestorLevel=1},
Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" PlacementTarget="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ToggleButton, AncestorLevel=1}}">
<local:MyManagementControl />
</Popup>
</Grid>
</ToggleButton>
</Grid>
...
MyManagementControl contains:
...
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListView Grid.Row="0" Grid.Column="0">
...
</ListView>
<GridSplitter Grid.Column="0" Width="10" HorizontalAlignment="Right" VerticalAlignment="Stretch" />
<Grid Grid.Row="0" Grid.Column="1">
...Details...
</Grid>
</Grid>
...

WPF: Problem with overlapping controls and grid column widths

I have a problem regarding a parent grid with a control in it that overlaps a tabcontrol.
I need the child grid (in the tab control) to resize its columns according to the overlapping control.
Specifically, when the overlapping control is resized (due to resize of the window for example) the child grid inside the tabcontrol needs to resize its columns so that the child controls inside the tabcontrol grid isn't overlapped by the control that overlaps the tabcontrol.
I sincerely hope someone here knows a solution for this problem, I've been fighting with it for days :)
Thanks in advance!
Best regards,
Req
edit: In response to the comments below:
Absolutely - I figured I should have, but seeing that I was/am at work I didn't have the code handy. But I can write up a similar example of the XAML.
<Grid Name="parentGrid" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<TabControl Name="tabCtrl" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2">
<TabItem Name="tabItem1">
<Grid Name="tabCtrlGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" /> <!-- This is the column I want to resize according to the overlapping image control below -->
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Button Name="someChildControl" Grid.Column="1" Grid.Row="0" />
</Grid>
</TabItem>
</TabControl>
<Image Name="overlappingImg" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Grid.RowSpan="2" /> <!-- whenever the screen/window is resized, the parentGrid resizes, and thus resizing this overlapping image. -->
</Grid>
What needs to happen is that column 0 in the tabCtrlGrid needs to resize its width to fit the width of the overlapping area of the image. That way someChildControl is never overlapped by the image, regardless of how it's resized.
Hopefully that makes it a little more clear :)
How does this look?
<Grid Name="parentGrid" Background="LightGray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Aqua"/>
<TextBlock Text="Tab controller" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"/>
<Rectangle Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Aqua"/>
<TextBlock Text="Up down nav" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Grid Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle HorizontalAlignment="Left" VerticalAlignment="Top" Width="130" Height="160" Fill="BlanchedAlmond"/>
<TextBlock Text="CoverArt" HorizontalAlignment="Left" VerticalAlignment="Top" Width="130" Height="160"/>
<Rectangle Grid.Column="1" Fill="LightGray" />
<TextBlock Text="Tab content" Grid.Column="1" />
</Grid>
</Grid>

Silverlight - Layout Question

I am creating a Silverlight application that should take up the width of the user's screen. This application has a horizontal row that greets the user. Then, two columns below it. The right column is always a fixed size. I want the left column to take up any remaining space. In an attempt to accomplish this, I am using the following XAML:
<Grid x:Name="layoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid x:Name="greetingGrid" Margin="0,0,0,8">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Welcome " />
<TextBlock x:Name="usernameTextBlock" />
</StackPanel>
</Grid>
<Grid x:Name="contentGrid" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid x:Name="leftGrid" HorizontalAlignment="Stretch">
<Border x:Name="leftBorder" BorderBrush="Black" Height="250">
<!-- Insert Wrap Panel of Images --!>
</Border>
</Grid>
<Grid x:Name="rightGrid" Width="100" Grid.Column="1" HorizontalAlignment="Right" Margin="8,0,0,0">
<Border BorderBrush="Black" BorderThickness="2">
<StackPanel Orientation="Vertical">
<TextBlock Text="How would you like to view the images?" />
<ComboBox x:Name="optionComboBox">
<ComboBoxItem Content="Name" />
<ComboBoxItem Content="Date" />
</ComboBox>
</StackPanel>
</Border>
</Grid>
</Grid>
</Grid>
Oddly, the two lower columns are split evenly in size. How do I make the left column take up all remaining space?
Thank you!
<Grid.ColumnDefinitions>
<ColumnDefinition width="*" />
<ColumnDefinition width="250"/>
</Grid.ColumnDefinitions>
Use * for the grid column to take the rest of the available space. Keep in mind that the parent container also needs to take the whole area to make it work!
You can specify the widths of the columns rather than on your "rightGrid", eg:
<Grid x:Name="greetingGrid" Margin="0,0,0,8">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Welcome " />
<TextBlock x:Name="usernameTextBlock" />
</StackPanel>
</Grid>
<Grid x:Name="contentGrid" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100px" />
</Grid.ColumnDefinitions>
<Grid x:Name="leftGrid" HorizontalAlignment="Stretch" Background="Fuchsia">
<Border x:Name="leftBorder" BorderBrush="Black" Height="250">
</Border>
</Grid>
<Grid x:Name="rightGrid" Grid.Column="1" HorizontalAlignment="Right" Margin="8,0,0,0">
<Border BorderBrush="Black" BorderThickness="2">
<StackPanel Orientation="Vertical">
<TextBlock Text="How would you like to view the images?" />
<ComboBox x:Name="optionComboBox">
<ComboBoxItem Content="Name" />
<ComboBoxItem Content="Date" />
</ComboBox>
</StackPanel>
</Border>
</Grid>

Resources