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.
Related
I have a WPF app.
It has a grid that fills the whole page and there are 3 rows.
In the middle row I display a usercontrol depending on what menu button the User has chosen.
I want to create a rounded border around each Usercontrol and after Googling I found an example and implemented it.
It works but I get and inner rectangular border as well as the rounded outer border.
This is the markup inside my UserControl:
<Border BorderThickness="3" BorderBrush="White" CornerRadius="10" Padding="2"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid>
<Grid Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="220" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Content="Search for Customer" />
<Label Grid.Row="1" Grid.Column="1" Content="Enter Customer First Name"/>
<Label Grid.Row="3" Grid.Column="1" Content="Enter Customer Last Name" />
<TextBox Name="txtForeName" Grid.Column="1" Grid.Row="2" />
<TextBox Name="txtSurname" Grid.Column="1" Grid.Row="4" />
<Button Name="btnCustomerSearch" Grid.Column="1" Grid.Row="5" />
</Grid>
</Grid>
</Border>
and it gives me this appearance:
The inner rectangular border is not a border at all. You have the border (white) and the grid (white as well) inside it. The grid fits your border, but area between them doesn't have any color, so it is transparent, thus you see it blue. If you want the whole area white, set the border's background white. Also, in your code one of the nested grids looks redundant.
Edit: Looks like after setting the border's background you still have two border's lines. Just remove BorderThickness and BorderBrush (It's the same as set them default) and increase padding a little. Also, you don't need to set the background of the grid separately, it's already white from the border.
This is how I imagine it:
<Border CornerRadius="10" Padding="5" Background="White"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="220" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Content="Search for Customer" />
<Label Grid.Row="1" Grid.Column="1" Content="Enter Customer First Name"/>
<Label Grid.Row="3" Grid.Column="1" Content="Enter Customer Last Name" />
<TextBox Name="txtForeName" Grid.Column="1" Grid.Row="2" />
<TextBox Name="txtSurname" Grid.Column="1" Grid.Row="4" />
<Button Name="btnCustomerSearch" Grid.Column="1" Grid.Row="5" />
</Grid>
</Border>
I have changed the Border placement, and set its margin to -3.
Setting the Border background to White will still keep 4 corners of the Grid remaining Visible.
See if this works for you.
<Grid Canvas.Left="40" Canvas.Top="103">
<Grid Background="White">
<Grid Margin="5">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="220" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Content="Search for Customer" />
<Label Grid.Row="1" Grid.Column="1" Content="Enter Customer First Name"/>
<Label Grid.Row="3" Grid.Column="1" Content="Enter Customer Last Name" />
<TextBox Name="txtForeName" Grid.Column="1" Grid.Row="2" />
<TextBox Name="txtSurname" Grid.Column="1" Grid.Row="4" />
<Button Name="btnCustomerSearch" Grid.Column="1" Grid.Row="5" Content="Press" />
</Grid>
</Grid>
</Grid>
<Border BorderThickness="3" BorderBrush="White" CornerRadius="10" Padding="2" Margin="-3"/>
</Grid>
I am seeking examples for creating a standard dialog/Login windows with OK and Cancel buttons bottom right.
I am unsure whether to use StackPanels, Grids or dockpanels. I understand that it's normally not correct to use the Canvas due the fact that you have to enter x and y values.
What I have created so far is the buttons for the Ok and Cancel
<StackPanel Orientation="Horizontal"
FlowDirection="RightToLeft" Height="32">
<Button Width="72" TabIndex="45" Margin="2,2,2,2">Cancel</Button>
<Button Width="72" TabIndex="40" Margin="2,2,2,2">OK</Button>
</StackPanel>
The kind of windows I want to create are the standard Dialog windows.
I would prefer the following markup:
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Center">Username:</TextBlock>
<TextBlock VerticalAlignment="Center" Grid.Row="1">Password:</TextBlock>
<TextBox Grid.Column="1" />
<TextBox Grid.Row=1"" Grid.Column="1" />
</Grid>
<Button Grid.Row="1">Ok</Button>
<Button Grid.Row="1" Grid.Column="1">Cancel</Button>
</Grid>
Yes, it is also possible to reduce number of Grids to 1, but I see no point in it. Also one can use StackPanel instead of outer Grid.
"The lightest markup" phrase can be interpreted differently. The lightest for developer is the most simple and clear. The lightest for computer is the fastest to initialize and render. As for the given case, the difference is really in 1 extra layout container. This really is not the case to make optimisations
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock grid.row=1 grid.column=0 text="user name" />
<TextBlock grid.row=1 grid.column=1 text="password" />
<TextBox grid.row=2 grid.column=0 />
<TextBox grid.row=2 grid.column=1 />
<Button grid.row=3 grid.column=0 text="OK" />
<Button grid.row=3 grid.column=1 text="Cancel" />
</Grid>
For my applications I like to use ChildWindow. Then on every page I can validate if the user is authetified and pop the child window if that is not the case. This is also nice use bookmarks if you are using the navigation type of project within silverlight.
<toolkit:BusyIndicator IsBusy="False" Name="LoginBusy" >
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="189*" />
<ColumnDefinition Width="189*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="65*" />
<RowDefinition Height="32" />
<RowDefinition Height="32" />
<RowDefinition Height="26*" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="4" Grid.Column="1" TabIndex="3" />
<sdk:Label Grid.Row="1" Name="label1" HorizontalAlignment="Right" Content="Username" Margin="4" />
<sdk:Label Grid.Row="2" Name="label2" HorizontalAlignment="Right" Content="Password" Margin="4" />
<TextBox Grid.Column="1" Grid.Row="1" Name="Username" Margin="4" Text="{Binding Username,Mode=TwoWay}" TextChanged="TextInserted" TabIndex="1" />
<PasswordBox Grid.Column="1" Grid.Row="2" Name="Password" Margin="4" Password="{Binding Password,Mode=TwoWay}" PasswordChanged="TextInserted" TabIndex="2" />
<TextBlock Grid.Column="1" Grid.Row="3" Height="37" HorizontalAlignment="Left" Visibility="Collapsed" Margin="19,13,0,0" Name="ErrorBlock" Text="Authentication Failed." VerticalAlignment="Top" Width="161" Foreground="Red" FontWeight="Bold" />
<Button Grid.Row="4" Height="23" HorizontalAlignment="Left" Margin="46,4,0,0" Visibility="Collapsed" Name="button1" Content="CANCEL" VerticalAlignment="Top" Width="75" Click="CancelButton_Click" IsTabStop="False" />
<Image Name="image1" Stretch="Fill" Source="Images/logo.png" />
</Grid>
</toolkit:BusyIndicator>
This is the content of my child window without the header bits. Notice that I bind directly to a user object which implements the InotifyPropertyChanged. Also while the web service performs the validation I enable the busy indicator so the user sees his request is being processes.
Cheers,
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>
Is there any way to change the style of gridlines in wpf grid?
I need to divide grid into 4 cells. To do it I used RowDefinitions and ColumnDefinitions. However I need user to distinguish which cell is which, that's why I need to change the color of the gridlines.
It depends on the look you are going for. In WPF, there are different ways to do almost anything. Here are a couple of the easier ones.
The easiest way is to set ShowGridlines="True":
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="5"
ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0"
Grid.Row="0"
Text="(0,0)" />
<TextBlock Grid.Column="1"
Grid.Row="0"
Text="(1,0)" />
<TextBlock Grid.Column="0"
Grid.Row="1"
Text="(0,1)" />
<TextBlock Grid.Column="1"
Grid.Row="1"
Text="(1,0)" />
</Grid>
That gives you grid something like:
You can also use a Rectangle in each cell of the grid to get different effects. Here, the Fill is transparent and the Stroke is Blue:
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Grid.Column="0"
Grid.Row="0"
Stroke="Blue"
Fill="Transparent" />
<TextBlock Grid.Column="0"
Grid.Row="0"
Text="(0,0)" />
<Rectangle Grid.Column="1"
Grid.Row="0"
Stroke="Blue"
Fill="Transparent" />
<TextBlock Grid.Column="1"
Grid.Row="0"
Text="(1,0)" />
<Rectangle Grid.Column="0"
Grid.Row="1"
Stroke="Blue"
Fill="Transparent" />
<TextBlock Grid.Column="0"
Grid.Row="1"
Text="(0,1)" />
<Rectangle Grid.Column="1"
Grid.Row="1"
Stroke="Blue"
Fill="Transparent" />
<TextBlock Grid.Column="1"
Grid.Row="1"
Text="(1,0)" />
</Grid>
That produces this:
Alternatively, you can fill the Rectangles and not give them a Stroke:
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Grid.Column="0"
Grid.Row="0"
Fill="LightBlue" />
<TextBlock Grid.Column="0"
Grid.Row="0"
Text="(0,0)" />
<Rectangle Grid.Column="1"
Grid.Row="0"
Fill="LightYellow" />
<TextBlock Grid.Column="1"
Grid.Row="0"
Text="(1,0)" />
<Rectangle Grid.Column="0"
Grid.Row="1"
Fill="LightYellow" />
<TextBlock Grid.Column="0"
Grid.Row="1"
Text="(0,1)" />
<Rectangle Grid.Column="1"
Grid.Row="1"
Fill="LightBlue" />
<TextBlock Grid.Column="1"
Grid.Row="1"
Text="(1,0)" />
</Grid>
That can, for instance, give a checkerboard pattern:
This is by no means a comprehensive answer - you could probably fill a book. It was just meant to show that there are many ways to do what you are asking, and that there are some pretty quick and easy solutions if that's all you need.
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>