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>
Related
I am using the WPF chart toolkit (System.Windows.Controls.DataVisualization.Charting). All stylings are in the XAML and I only bound the data to chart from my ViewModel. Everything looks alright for the first time I click on a button to show the columnseries. When I click on the button for the second time, the chart becomes bigger/corrupted; It shows only part of the graph.
The graph is drawn for the first time:
And button clicked for the second time:
The code I am using is as below:
<dvc:Chart Cursor="Cross"
Background="#FFFFFCF2"
Title="{Binding Title}"
Height="410"
Width="750"
VerticalAlignment="Top"
Name="ChartContainer">
<dvc:Chart.Series>
<dvc:ColumnSeries ItemsSource="{Binding ChartData,UpdateSourceTrigger=PropertyChanged}"
IndependentValueBinding="{Binding Path= Key}"
DependentValueBinding="{Binding Path= Value}"
Name="SummariesChart"
Margin="0,0,0,0"
IsManipulationEnabled="False">
<dvc:ColumnSeries.DataPointStyle>
<Style TargetType="dvc:ColumnDataPoint">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="dvc:ColumnDataPoint">
<Grid>
<Rectangle Fill="{TemplateBinding Background}"
Stroke="Black" />
<Grid Margin="0,0, 0, 0"
HorizontalAlignment="Center"
VerticalAlignment="Top">
<TextBlock Text="{TemplateBinding FormattedDependentValue}"
Margin="2" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</dvc:ColumnSeries.DataPointStyle>
</dvc:ColumnSeries >
</dvc:Chart.Series >
<dvc:Chart.Axes>
<dvc:LinearAxis Orientation="X"
Title="{Binding XTitle}"
Interval="1"
Location="Bottom"
ShowGridLines="True" />
<dvc:LinearAxis Orientation="Y"
Title="{Binding YTitle}"
ShowGridLines="True"
Location="Left" />
</dvc:Chart.Axes>
</dvc:Chart>
Also, to give you complete idea, I used a style on top of the page as follow:
<Style TargetType="dvc:Chart">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="dvc:Chart">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<dv:Title Content="{TemplateBinding Title}"
Style="{TemplateBinding TitleStyle}"
Margin="1" />
<Grid Grid.Row="1"
Margin="1,0,1,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<primitives:EdgePanel x:Name="ChartArea">
<Grid Canvas.ZIndex="-1"
Style="{TemplateBinding PlotAreaStyle}" />
<Border Canvas.ZIndex="10"
BorderBrush="#FF919191"
BorderThickness="1" />
</primitives:EdgePanel>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="BarDataPointStyle"
TargetType="{x:Type dvc:BarSeries}">
<Setter Property="Background"
Value="Blue"></Setter>
<Setter Property="Opacity"
Value="0" />
</Style>
When I remove <dvc:Chart.Axes> block, it works correctly consistently. But I need X-axe and Y-axes descriptions existing in this code block. Do you know how I can tackle this problem? I appreciate your help.
I found a way to resolve the issue. But still, I am skeptical that something is wrong with the styling or something.
I added Minimum = 0 and Maximum in LinearAxis tag. I bounded Maximum to a variable in my ViewModel. I got the length of the array and added one to the maximum variable(MaxNumberInXAxes).
<dvc:LinearAxis Orientation="X"
Title="{Binding XTitle}" I
nterval="{Binding XAxisInterval}"
Location="Bottom"
ShowGridLines="True"
AllowDrop="False"
Minimum="0"
Maximum="{Binding MaxNumberInXAxes}"/>
The graph becomes something like this:
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>
I am creating a new template for Tab control
in which I need to arrange items like attached image. The style given below is to have main tabs ..and contents... While mentioning the content (content presenter) I have to specify the grid column/row...So if I use row column/row as "0","0"..then all my contents will in the left top area...
Please tell me how do I specify a content presenter with 3/4 area of the grid.
<Style x:Key="OutlookTabControlStyle" TargetType="{x:Type TabControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid ClipToBounds="true" SnapsToDevicePixels="true"
KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid x:Name="ContentPanel" Grid.Column="0" Grid.Row="1">
<ContentPresenter SnapsToDevicePixels=
"{TemplateBinding SnapsToDevicePixels}" Margin="2,2,2,2"
x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent"/>
</Grid>
<StackPanel HorizontalAlignment="Stretch" Margin="0,-2,0,0"
x:Name="HeaderPanel" VerticalAlignment="Bottom" Width="Auto"
Height="Auto" Grid.Row="1" IsItemsHost="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground"
Value="{DynamicResource
{x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My question is how do I allocate the remaining part (other than main tabs area) as content paresenter... I can see Canvas as one option. please help me if you know more about this.
Create a Grid with two Columns: one column with a width of * and one with a width of 3*. This will make make your 2nd column 3 times the size of the first column, or 3/4 of the total size
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnsDefinitions>
</Grid>
As an alternative you don't want to use a Grid, I usually use a MathConverter which allows me to adjust a bound value by a mathematical formula. The code for the MathConverter can be found here
<Grid Canvas.Left="{Binding ElementName=ParentPanel, Path=ActualWidth,
Converter={StaticResource MyMathConverter},
ConverterParameter=#VALUE*.75}" />
I have created a static resource defining the border of a specific item in my xaml, but I can't find a good way to define a unique color for each side!
xaml:
<Border Style="{StaticResource SidePanelBorder}">
<!-- rest of the xaml -->
</Border>
StaticResource:
<Style x:Key="SidePanelBorder">
<Setter Property="Control.BorderBrush" Value="#FF363636" />
<Setter Property="Control.BorderThickness" Value="1" />
</Style>
But I want to define one color for each side of the border, and eventually also a different Border thickness.
Any good techniques out there doing this?
Seems very hacky, but you could define borders within borders, and make only 1 side have a thickness. For example
<Border BorderThickness="0,0,0,10" BorderBrush="Green">
<Border BorderThickness="0,0,10,0" BorderBrush="Blue">
<Grid>
<Button>Hello</Button>
</Grid>
</Border>
</Border>
would give a green border on the bottom and a blue border to the right. Isn't the prettiest piece of Xaml though.
Another solution using one Border and a VisualBrush, allowing setting the Border's CornerRadius and BorderThickness:
<Border BorderThickness="10" CornerRadius="10" HorizontalAlignment="Right" Height="150" VerticalAlignment="Bottom" Width="150" Margin="0,0,92.666,42.667">
<Border.BorderBrush>
<VisualBrush>
<VisualBrush.Visual>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Path x:Name="ColoredBorderLeft" Data="M0,0 L0,0 1,0.5 L1,0.5 0,1" Fill="Blue" Stretch="Fill" Grid.RowSpan="2"/>
<Path x:Name="ColoredBorderRight" Data="M1,0 L1,0 0,0.5 L0,0.5 1,1" Fill="Red" Stretch="Fill" Grid.Column="1" Grid.RowSpan="2"/>
<Path x:Name="ColoredBorderTop" Data="M0,0 L0,0 0.5,1 L0.5,1 1,0" Fill="Green" Stretch="Fill" Grid.ColumnSpan="2"/>
<Path x:Name="ColoredBorderBottom" Data="M0,1 L0,1 0.5,0 L0.5,0 1,1" Fill="Yellow" Stretch="Fill" Grid.Row="1" Grid.ColumnSpan="2"/>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Border.BorderBrush>
</Border>
The Grid is needed to prevent the tips of the triangle Paths to "push through" into the border.
The Path.Name's can be used for DataBinding or setting the color from code behind.
you can have a DockPanel and can put 4 Borders inside it, each docked to different side.
like:
<DockPanel LastChildFill="true">
<Border DockPanel.Dock="Left" Background="Red"/>
<Border DockPanel.Dock="Top" Background ="Blue"/>
<Border DockPanel.Dock="Right" Background ="Yellow"/>
<Border DockPanel.Dock="Bottom" Background ="Green"/>
<Grid>
...........your control here
</Grid>
</DockPanel>
If you use a Grid you can have Border's overlay on one another to achieve the same affect. Just set the border thickness of the border color you want to show and have the other border thickness be 0.
<UserControl.Resources>
<Style x:Key="GreenBorder" TargetType="Border">
<Setter Property="BorderBrush" Value="Green" />
<Setter Property="BorderThickness" Value="1,1,1,0" />
</Style>
<Style x:Key="RedBorder" TargetType="Border">
<Setter Property="BorderBrush" Value="Red" />
<Setter Property="BorderThickness" Value="0,0,0,1" />
</Style>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.Row="0" Style="{StaticResource GreenBorder}">
<!-- Content goes here -->
</Border>
<Border Grid.Column="0" Grid.Row="0" Style="{StaticResource RedBorder}">
</Border>
</Grid>
This will give a Green border to the left, top and right borders, but a Red border to the bottom border of the Grid cell.
there's no easy way to do this without writing your own control or subclassing border
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.