I have a datagrid in one of my WPF application where I am showing some data from an XML file. Now there are rows which are kind of a headers. I want to show those rows with colspan, so that it occupies the whole row. I have tried the below code but it is not working.
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Style.Triggers>
<DataTrigger Binding="{Binding Type}" Value="BorderCheck">
<Setter Property="Grid.ColumnSpan" Value="6" />
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
There are 2 things
if you need column span to all the rows there's no point adding extra columns
if you need column span to particular rows you need set it at the row level which should be the element you want to expand to other columns
like below
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" FontSize="20" >Name</Label>
<TextBox Grid.Row="1" Grid.ColumnSpan="2" BorderThickness="5" />
</Grid>
Related
I bind observable collection on listBox. I have data tempate on listbox item. It consit one image control and som textBlock.
If is mouse over on some listBox item I would like achieve this behavior:
Show PopUp/ToolTip (some "rectangle" with controls) and bind values from listBox current item.
And on textBox in item data template I have style, I would like change color of text in textBlock, for example from black to green.
Style is here:
<Style x:Key="FriedNickStyle" TargetType="TextBlock">
<Setter Property="Margin" Value="2,2,2,2"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="Foreground" Value="Black"/>
</Style>
Sory for my english, I have problem how describe this behavior correct. I try many thing but any of them doesn’t work good.
Here is it my style:
<DataTemplate x:Key="FriendListBoxItemTemplate">
<Grid Name="RootLayout">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.3*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"></RowDefinition>
</Grid.RowDefinitions>
<Image Margin="4,4,4,2" Grid.Column="0">
<Image.Source >
<MultiBinding Converter="{StaticResource avatarConverter}">
<Binding Path="ProfilePhoto"></Binding>
<Binding Path="StatusInfo.IsLogged"></Binding>
</MultiBinding>
</Image.Source>
</Image>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock
Text="{Binding Path=Nick}"
Style="{StaticResource FriedNickStyle}"
Grid.Column="0" Grid.Row="0">
</TextBlock>
</Grid>
</Grid>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!--SHOW SOME POP UP WINDOW and bind properties from ITEM (VALUE)-->
<!--Change color of textBlock-->
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
Thank everybody who help me.
Well, I found this turorial, this article, by the MSDN and another stack overflow's question.
Basically, here's how:
<Popup Margin="10,10,0,13"
Name="Popup1"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="194"
Height="200"
IsOpen="True"> // change this to open it
<TextBlock Name="McTextBlock" Background="LightBlue" >
This is popup text
</TextBlock>
I am currently using Silverlight 3. I want to create the equivalent of a 2x2 HTML table. I want each cell to have a black border. How do I do this in Silverlight? Isn't there a property I can set on a Grid element to make each cell have a border?
Nope. Grid is simply one of a number of panel types that are designed to layout their children in specific way. Grids are used extensively in many different and often nested ways. They are lightweight and therefore do not carry loads of baggage that may or may not get used, such as in this a bunch of properties to determine borders on "cells".
To create a border on each cell simply use the Border control:
<Grid>
<Grid.Resources>
<Style x:Key="borderStyle" TargetType="Border">
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="2" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Style="{StaticResource borderStyle}" Grid.Row="0" Grid.Column="0">
<!-- Cell 0.0 content here -->
</Border>
<Border Style="{StaticResource borderStyle}" Grid.Row="0" Grid.Column="1">
<!-- Cell 0.1 content here -->
</Border>
<Border Style="{StaticResource borderStyle}" Grid.Row="1" Grid.Column="0">
<!-- Cell 1.0 content here -->
</Border>
<Border Style="{StaticResource borderStyle}" Grid.Row="1" Grid.Column="1">
<!-- Cell 1.1 content here -->
</Border>
</Grid>
Lets say I have a grid, within my grid I have a number of controls. Instead of setting the margin for each of these controls, I wish to create a style to set the margin for ANY control I drop into a grid. Is this possible?
I was hoping that the following would work:
<Window.Resources>
<Style x:Key="DefaultMargins">
<Setter Property="Control.Margin" Value="3, 3, 3, 3"/>
<Setter Property="Control.FontSize" Value="50"/>
</Style>
</Window.Resources>
<Grid Style="{StaticResource DefaultMargins}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Grid.Column="0" Name="button1">Button</Button>
</Grid>
But the Margin is ignored, it not supporting property value inheritance. Is there a simple alternative to apply the margins to each 'child' of the grid? I understand that it is possible to achieve this sort of thing in CSS and some of our developers are interested in using this sort of construct.
Thanks
Ian
You can specify the style by type and constrain it to the scope of the Grid:
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type Control}">
<Setter Property="Control.Margin" Value="3, 3, 3, 3"/>
<Setter Property="Control.FontSize" Value="50"/>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Grid.Column="0" Name="button1">Button</Button>
This seems to answer a similar question to yours:
Apply style to all TreeViewItem
If that doesn't work then I'm not too sure about how it would be done in XAML but you could add the style in the code-behind with:
Control element;
for (int i = 0; i < Grid1.Children.Count; i++)
{
element = (Control) Grid1.Children[i];
element.Style = (Style) FindResource("DefaultMargins");
}
Edit: Grid1 refers to a x:Name="Grid1" property added to the XAML grid (poor naming I know).
Place elements inside ItemsControl with ItemsPanel set to Grid and ItemContainerStyle to your style:
<Window.Resources>
<Style x:Key="DefaultMargins">
<Setter Property="Control.Margin"
Value="3, 3, 3, 3" />
<Setter Property="Control.FontSize"
Value="50" />
</Style>
</Window.Resources>
<ItemsControl ItemContainerStyle="{StaticResource DefaultMargins}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="3*" />
<RowDefinition Height="3*" />
</Grid.RowDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<Button Grid.Row="0"
Grid.Column="0"
Name="button1">Button</Button>
</ItemsControl>
This has a drawback of not working well with designer.
I have a ListBox that uses an ItemContainerStyle. I have tried everything I can think of to get a CheckBox control to center vertically and horizontally. Any ideas?
<ListBox
IsSynchronizedWithCurrentItem="True"
Height="Auto" Width="Auto" DockPanel.Dock="Top"
ItemContainerStyle="{StaticResource lbcStyle}" />
<Style TargetType="ListBoxItem" x:Key="lbcStyle">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="ContentTemplate" Value="{StaticResource editable}"/>
</Trigger>
</Style.Triggers>
<Setter Property="ContentTemplate" Value="{StaticResource nonEditable}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/> '//i have tried stretch here also
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
CheckBoxes get this style:
<Style x:Key="editorCheckBox" TargetType="{x:Type CheckBox}">
<Setter Property="MinWidth" Value="67" />
<Setter Property="Height" Value="25" />
<Setter Property="Margin" Value="5,0,5,0" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
Here are editable / non-editable:
<DataTemplate x:Key="editable">
<Border x:Name="brdEditable" Width="Auto" HorizontalAlignment="Stretch">
<DockPanel x:Name="dpdEditable" LastChildFill="True" Width="Auto" Height="Auto">
<Grid x:Name="grdEditable" Width="Auto" Height="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25" />
<ColumnDefinition Width="25" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="110" />
<ColumnDefinition Width="110" />
<ColumnDefinition Width="60" />
<ColumnDefinition Width="90" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
'...
<CheckBox x:Name="chkActive" Grid.Column="7" Height="25" Style="{StaticResource editorCheckBox}" ToolTip="Is Construction Active?" IsEnabled="true" Validation.ErrorTemplate="{StaticResource validationTemplate}">
<CheckBox.IsChecked>
<Binding Path="Active">
<Binding.ValidationRules>
<DataErrorValidationRule></DataErrorValidationRule>
<ExceptionValidationRule></ExceptionValidationRule>
</Binding.ValidationRules>
</Binding>
</CheckBox.IsChecked>
</CheckBox>
'...
<ContentControl Name="ExpanderContent" Visibility="Collapsed" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="14"></ContentControl>
</Grid>
</DockPanel>
</Border>
</DataTemplate>
<DataTemplate x:Key="nonEditable">
<Border x:Name="brdNonEditable" Width="Auto" HorizontalAlignment="Stretch">
<DockPanel Width="Auto" Height="25">
<Grid Width="Auto" Height="25">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25" />
<ColumnDefinition Width="25" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="110" />
<ColumnDefinition Width="110" />
<ColumnDefinition Width="60" />
<ColumnDefinition Width="90" />
</Grid.ColumnDefinitions>
<CheckBox x:Name="chkActive" Grid.Column="7" Height="25" Style="{StaticResource editorCheckBox}" ToolTip="Is Construction Active?" IsEnabled="false" Validation.ErrorTemplate="{StaticResource validationTemplate}">
<CheckBox.IsChecked>
<Binding Path="Active">
<Binding.ValidationRules>
<DataErrorValidationRule></DataErrorValidationRule>
<ExceptionValidationRule></ExceptionValidationRule>
</Binding.ValidationRules>
</Binding>
</CheckBox.IsChecked>
</CheckBox>
<Label Content="calCompDate" Style="{StaticResource editorLabelList}" Grid.Column="8" ToolTip="{Binding Path= CompDate}" />
</Grid>
</DockPanel>
</Border>
</DataTemplate>
And thanks so much to everyone who has tried to help me solve this!
Try setting the ScrollViewer.HorizontalScrollBarVisibility property to "Disabled" on the ListBox. This forces the item containers to have a fixed width; otherwise, they can have any horizontal size, and horizontal alignment cannot be calculated sensibly.
Vertical alignment should be a matter of modifying the ListBoxItem style, as per Donnelle's answer.
Edit: In your code snippets, the CheckBox is inside a Grid which is inside a DockPanel which is inside a Border. Which element are you trying to center exactly? Are you sure the rest of them don't interfere? Here's how it looks for me with my suggestion and HorizontalContentAlignment="Center", and only the checkbox in the data template:
One more edit: I copy/pasted your grid/dockpanel/border exactly as they appear in the snippets you pasted, and the result is exactly the same - items centered horizontally.
I've had the same issue to. Have you tried setting "HorizontalAlignment" directly on the ListBoxItem in the style? (not HorizontalContentAlignment)
Have you tried setting HorizontalContentAlignment to "Stretch" on the ListBox itself? I believe this is necessary to make each ListBoxItem fill the width of the ListBox.
Setting the height on the ListBoxItem style-- rather than the checkbox-- does what I think you're after.
The checkbox is aligned top-left. For a quick and dirty, I have updated the margin on the checkbox to 4,3,0,0 on a row heigh of 20. May need to be adjusted depending upon your row height and if you want a buffer on the left. The margin attribute can get you out of odd format situations if you don't have time to write your own template or use other controls/containers.
I'm trying to create a WPF application which consists of a 9x9 grid with the row and columns using different styles. What I'm hoping to do is provide a star value for the height and width of the column and row definitions. This does not appear to work in the current context. Is this even possible, and if so, how?
<Window x:Class="BaroqueChessUI.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="500" Width="500">
<Window.Resources>
<Style x:Key="LightBackground" >
<Setter Property="Control.Background" Value="Teal" />
</Style>
<Style x:Key="DarkBackground" >
<Setter Property="Control.Background" Value="Maroon" />
</Style>
<Style x:Key="FileStyle">
<Setter Property="Control.Width" Value="0.12" />
</Style>
<Style x:Key="RankStyle">
<Setter Property="Control.Height" Value="0.12" />
</Style>
<Style x:Key="FileHeadingStyle">
<Setter Property="Control.Width" Value="0.04" />
</Style>
<Style x:Key="RankHeadingStyle">
<Setter Property="Control.Height" Value="0.04" />
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Name="rdRank" Style="{StaticResource FileHeadingStyle}" />
<RowDefinition Name="rdRank1" Style="{StaticResource FileStyle}" />
<RowDefinition Name="rdRank2" Style="{StaticResource FileStyle}" />
<RowDefinition Name="rdRank3" Style="{StaticResource FileStyle}" />
<RowDefinition Name="rdRank4" Style="{StaticResource FileStyle}" />
<RowDefinition Name="rdRank5" Style="{StaticResource FileStyle}" />
<RowDefinition Name="rdRank6" Style="{StaticResource FileStyle}" />
<RowDefinition Name="rdRank7" Style="{StaticResource FileStyle}" />
<RowDefinition Name="rdRank8" Style="{StaticResource FileStyle}" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Name="cdFile" Style="{StaticResource RankHeadingStyle}" />
<ColumnDefinition Name="cdFile2" Style="{StaticResource RankStyle}" />
<ColumnDefinition Name="cdFile3" Style="{StaticResource RankStyle}" />
<ColumnDefinition Name="cdFile4" Style="{StaticResource RankStyle}" />
<ColumnDefinition Name="cdFile5" Style="{StaticResource RankStyle}" />
<ColumnDefinition Name="cdFile6" Style="{StaticResource RankStyle}" />
<ColumnDefinition Name="cdFile7" Style="{StaticResource RankStyle}" />
<ColumnDefinition Name="cdFile8" Style="{StaticResource RankStyle}" />
</Grid.ColumnDefinitions>
</Grid>
A grid column definition / row definition define layout, and within the defined areas you should add controls which should be styled (using the attached properties as you are could get tedious), so try not styling the rowdefintions / columnsdefinitions themselves.
Styling Items:
You can enter a control into a row / column like so (sorry if i'm patronizing):
<Rectangle Grid.Row="0" Grid.Column="0" ></Rectangle>
Then define the Style on the control within the Row/Column.
<Rectangle Grid.Row="0" Grid.Column="0" Style="{StaticResource DarkBackground}"></Rectangle>
Sizing (Star Values):
Note: that the Grid will dynamically fill the available area as your code stands and you will only need to apply star values if you define a fixed height and width to the Grid and want proportional allocation of remaining space.
In other words... with regards to achieving "star value":
What I'm hoping to do is provide a
star value for the height and width of
the column and row definitions.
Why not just enter the value like so to your definitions?:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Name="rdRank" Height="500" />
<RowDefinition Name="rdRank1" Height="60*" />
<RowDefinition Name="rdRank2" Style="40*" />
</Grid.RowDefinitions>
</Grid>
In this example the rowdefinition named "rdRank" would have a fixed height of "500", and the remaining space would be allocated to "rdRank1" which would take up 60% and "rdRank2" 40%.
**Attached Properties: **
In your style:
<Style x:Key="RankStyle">
<Setter Property="Control.Height" Value="0.12" />
</Style>
You are stating any control within the item this style is applied to that has a property called Height should take the value of 0.12. Control.Height will end up filtering down so to speak.
If you are aiming to achieve a height of 0.12* on the Row use:
<Style x:Key="NewRankStyle" TargetType="{x:Type RowDefinition}">
<Setter Property="Height" Value="0.12*" />
</Style>
..
<Grid>
<Grid.RowDefinitions>
<RowDefinition Name="rdRank" Style="{StaticResource FileHeadingStyle}" />
<RowDefinition Name="rdRank1" Style="{StaticResource NewRankStyle}" />
Using a 'TargetType' allows you to target Type specific properties and as a result allows use of Star Values.
Hope this clears up a few concepts for you.
The row or column star sizing only works if you give the grid a width and height. If the grid is auto-sizing based on its content, then star sizing doesn't work.