I have found some example code that creates a gradient fill in a WPF rectangle control:
<Rectangle Height="{Binding ElementName=txtName}" Width="{Binding ElementName=txtName}">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="Silver" Offset="0.0" />
<GradientStop Color="Black" Offset="0.5" />
<GradientStop Color="white" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
I have some written some code that displays a collection of ListBox's that contain details from MyObject:
<UserControl.Resources>
<DataTemplate x:Key="CustomerTemplate">
<Border BorderThickness="2" BorderBrush="Silver" CornerRadius="5" Padding="1" Height="50">
<Grid x:Name="thisGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" >
<Image Source="C:\MyImage.jpg" Height="50" Width="100" ></Image>
</StackPanel>
<Border Grid.Column="1" Margin="0" Padding="0">
<StackPanel Orientation="Vertical">
<TextBlock Name="txtName" Text="{Binding Name}" Background="Silver" Foreground="Black" FontSize="16" FontWeight="Bold" Height="25"/>
</StackPanel>
</Border>
</Grid>
</Border>
</DataTemplate>
</UserControl.Resources>
<ListBox ItemsSource="{Binding}" ItemTemplate="{StaticResource CustomerTemplate}"
Name="grdList" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" >
</ListBox>
I would like to apply the same stlye of fill that i get with the first example, in each of my ListBox's. I can't quite figure out how to do this. Can anyone help?
Thanks
Have you looked at setting the background fill of the item containers using the ItemContainerStyle property of ListBox?
Since you can change ControlTemplate of your ListBox like in the example here http://msdn.microsoft.com/en-us/library/ms754242(VS.85).aspx, you can write something like this
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Style x:Key="{x:Type ListBox}" TargetType="ListBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border
Name="Border"
BorderThickness="1"
CornerRadius="20" Style="{DynamicResource DynamicGridBrush}">
<ScrollViewer Margin="0" Focusable="false">
<StackPanel Margin="2" IsItemsHost="True" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Border" x:Key="DynamicGridBrush">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="LightBlue" />
<GradientStop Offset="0.65" Color="LightGreen" />
<GradientStop Offset="1" Color="White" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style></Page.Resources>
<Grid>
<ListBox>
<TextBlock>aaa</TextBlock>
<TextBlock>bbb</TextBlock>
<TextBlock>ccc</TextBlock>
</ListBox>
</Grid>
</Page>
If I understood your question and you would like to apply gradient background to your whole listbox.
Related
How to create a class that inherits from the Window class.I want this class to have render in visual studio designer.
What I have
What I want
Only, as you can see, I will extend the standard class. And I would really like to see my visualization, instead of the standard one. But I don't even know how to approach it.
I would be very grateful if you could help me find a solution.
-- Changed
At the moment, all the layout is in the window class.
Window Source Code
<Window.DataContext>
<vm:ApplicationViewModel/>
</Window.DataContext>
<Border Style="{StaticResource WindowBorderStyle}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- Menu -->
<Border Grid.Column="0" CornerRadius="10 0 0 10">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#223266" Offset="0"/>
<GradientStop Color="#27396b" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<StackPanel>
<!-- UserPanel -->
<ContentPresenter Margin="0 35 0 0" Content="{Binding UserViewModel}"/>
<Separator Height="0.8" Margin="20 30" Background="#46558A"/>
<ContentPresenter Content="{Binding MenuViewModel}"/>
</StackPanel>
</Border>
<!-- Main page-->
<Border Grid.Column="1" CornerRadius="0 10 10 0" MouseDown="Border_MouseDown" >
<Border.Background>
<LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
<GradientStop Color="#41518f" Offset="0"/>
<GradientStop Color="#2c386c" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="32"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Header -->
<StackPanel Grid.Row="0" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,5,5,5">
<cc:HeaderButton Icon="EyeSlash" IsEnabled="False" />
<cc:HeaderButton Icon="WindowMinimize" Command="{Binding MinimizeWindowCommand}" CommandParameter="{Binding ElementName=BaseWindow}"/>
<cc:HeaderButton Command="{Binding NormalizeOfMaximizeWindowCommand}" CommandParameter="{Binding ElementName=BaseWindow}">
<cc:HeaderButton.Style>
<Style TargetType="{x:Type cc:HeaderButton}">
<Setter Property="Icon" Value="WindowMaximize"/>
<Style.Triggers>
<DataTrigger Binding="{Binding WindowState, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Window}}}" Value="Maximized">
<Setter Property="Icon" Value="WindowRestore"/>
</DataTrigger>
</Style.Triggers>
</Style>
</cc:HeaderButton.Style>
</cc:HeaderButton>
<cc:HeaderButton Icon="WindowClose" Command="{Binding CloseWindowCommand}" CommandParameter="{Binding ElementName=BaseWindow}"/>
</StackPanel>
<Grid Grid.Row="1">
<ContentPresenter Content="{Binding MenuViewModel.SelectedMenuElement.ViewModel}"/>
</Grid>
</Grid>
</Border>
</Grid>
</Border>
It seems to me that it would be right to share the responsibility.
I was submitting this piece of XAML code (a simon game) for a class project, and the Windows couldn't resize to a smaller resolution, so I was wondering if you could help me, I've tried to use *s and autos in my Grid.Columns and Rows but it only seeems to resize the content vertically, not horizontally.
I'm quite new to WPF so if anyone can help me I would appreciate it.
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:SimonWPF"
mc:Ignorable="d"
Title="Simon" Height="1080" Width="1920"
SizeToContent="WidthAndHeight">
<StackPanel HorizontalAlignment="Center" Background="White"
>
<!--STYLING-->
<StackPanel.Resources>
<Style TargetType="TextBlock" x:Key="HeadingStyle">
<Setter Property="FontFamily" Value="Nexa Demo"/>
<Setter Property="FontSize" Value="26"/>
<Setter Property="Margin" Value="10,40"/>
</Style>
<Style TargetType="TextBlock" x:Key="SubheadingStyle">
<Setter Property="FontFamily" Value="Nexa Demo"/>
<Setter Property="FontSize" Value="56"/>
<Setter Property="Margin" Value="10,-50,8,8"/>
</Style>
</StackPanel.Resources>
<!--STYLING-->
<TextBlock Style="{StaticResource SubheadingStyle}" Name="SimonStatus"
Text="WATCH"
HorizontalAlignment="Left"
Margin="280,20"/>
<!--HEADING-->
<Grid Width="777" Height="777">
<!--COLUMN DEFINITIONS-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="350*"/>
<ColumnDefinition Width="70*"/>
<ColumnDefinition Width="350*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="350*"/>
<RowDefinition Height="70*"/>
<RowDefinition Height="350*"/>
</Grid.RowDefinitions>
<!--COLUMN DEFINITIONS-->
<!--STYLING-->
<Grid.Resources>
<Style TargetType="Rectangle">
<Setter Property="Fill">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.GradientOrigin>0.5,0.5</RadialGradientBrush.GradientOrigin>
<RadialGradientBrush.Center>0.5,0.5</RadialGradientBrush.Center>
<RadialGradientBrush.RadiusX>0.5</RadialGradientBrush.RadiusX>
<RadialGradientBrush.RadiusY>0.5</RadialGradientBrush.RadiusY>
<RadialGradientBrush.Opacity>0</RadialGradientBrush.Opacity>
<GradientStop>
<GradientStop.Color>White</GradientStop.Color>
<GradientStop.Offset>0</GradientStop.Offset>
</GradientStop>
<GradientStop>
<GradientStop.Color>Blue</GradientStop.Color>
<GradientStop.Offset>1.9</GradientStop.Offset>
</GradientStop>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<!--STYLING-->
<!--GRADIENT SECTION-->
<Rectangle Grid.Column="2" Grid.Row="0"
Fill="Blue"
RadiusX="0,100"
RadiusY="0,55"/>
<Rectangle Grid.Column="2" Grid.Row="0"
Name="BlueBlock"
RadiusX="0,100"
RadiusY="0,55">
<Rectangle.Fill>
<RadialGradientBrush
x:Name="BlueBlockGradient"
GradientOrigin="0.5,0.5"
Center="0.5,0.5"
RadiusX="0.5"
RadiusY="0.5"
Opacity="0">
<GradientStop Color="White" Offset="0"
x:Name="WhiteStop4"/>
<GradientStop Color="Blue" Offset="1.9"
x:Name="BlueStop"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--GRADIENT SECTION-->
<Rectangle Grid.Column="0" Grid.Row="2"
Fill="Orange"
RadiusX="0,100"
RadiusY="0,55"/>
<Rectangle Grid.Column="0" Grid.Row="2"
Name="OrangeBlock"
RadiusX="0,100"
RadiusY="0,55">
<Rectangle.Fill>
<RadialGradientBrush
x:Name="OrangeBlockGradient"
GradientOrigin="0.5,0.5"
Center="0.5,0.5"
RadiusX="0.5"
RadiusY="0.5"
Opacity="0">
<GradientStop Color="White" Offset="0"
x:Name="WhiteStop3"/>
<GradientStop Color="Orange" Offset="1.9"
x:Name="OrangeStop"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--GRADIENT SECTION-->
<Rectangle Grid.Column="2" Grid.Row="2"
Fill="Green"
RadiusX="0,100"
RadiusY="0,55"/>
<Rectangle Grid.Column="2" Grid.Row="2"
Name="GreenBlock"
RadiusX="0,100"
RadiusY="0,55">
<Rectangle.Fill>
<RadialGradientBrush
x:Name="GreenBlockGradient"
GradientOrigin="0.5,0.5"
Center="0.5,0.5"
RadiusX="0.5"
RadiusY="0.5"
Opacity="0">
<GradientStop Color="White" Offset="0"
x:Name="WhiteStop2"/>
<GradientStop Color="Green" Offset="1.9"
x:Name="GreenStop"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--GRADIENT SECTION-->
<Rectangle Grid.Column="0" Grid.Row="0"
Fill="Red"
RadiusX="0,100"
RadiusY="0,55"/>
<Rectangle Grid.Column="0" Grid.Row="0"
Name="RedBlock"
RadiusX="0,100"
RadiusY="0,55">
<Rectangle.Fill>
<RadialGradientBrush
x:Name="RedBlockGradient"
GradientOrigin="0.5,0.5"
Center="0.5,0.5"
RadiusX="0.5"
RadiusY="0.5"
Opacity="0">
<GradientStop Color="White" Offset="0"
x:Name="WhiteStop"/>
<GradientStop Color="Red" Offset="1.9"
x:Name="RedStop"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Grid.Column="1" Grid.Row="1" Fill="LightBlue"
RadiusX="100"
RadiusY="100"
Name="ScoreRectangle"/>
<TextBlock Text="0" Grid.Row="1" Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="50"
FontFamily="Nexa Demo"
Name="Score"
Foreground="White"/>
</Grid>
<Button Content="PLAY" FontFamily="Nexa Demo"
Width="200" Height="90" FontSize="50
" BorderBrush="LightBlue"
Margin="290,30,950,0"
Name="PlayButton"
Background="Transparent"
BorderThickness="9"
/>
</StackPanel>
</Window>
Put your outer StackPanel inside a Viewbox:
<Viewbox>
<StackPanel HorizontalAlignment="Center" Background="White" ...>
... etc ...
</StackPanel>
</Viewbox>
I am working on a simple node editor, something like this (for me it is a model program). I have two windows in XAML with different solutions. In the first case (still not completed, but for demonstration), I am using templates inside grid:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Grafika"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="Grafika.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate DataType="{x:Type local:Node}">
<Thumb Width="{Binding Width}" Height="{Binding Height}" DragDelta="Thumb_DragDelta">
<Thumb.Template>
<ControlTemplate>
<Border Background="CadetBlue"/>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</DataTemplate>
<DataTemplate DataType="{x:Type local:Connector}">
<Line Name="Connection" Stroke="Red" StrokeThickness="3" X1="{Binding StartX}" Y1="{Binding StartY}" X2="{Binding StopX}" Y2="{Binding StopY}"/>
</DataTemplate>
</Window.Resources>
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<Grid x:Name="mrizka">
<Border x:Name="obrys" Width="200" Height="150" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Aqua" BorderBrush="Red" d:IsHidden="True"/>
<Path Data="M 25,25 H 250 V 250" Stroke="Black" d:IsHidden="True"/>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<Border>
<Border.Background>
<VisualBrush TileMode="Tile" Viewport="0,0,50,50" ViewportUnits="Absolute" Viewbox="0,0,50,50" ViewboxUnits="Absolute">
<VisualBrush.Visual>
<Rectangle Stroke="Black" StrokeThickness="1" Height="50" Width="50"/>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
</Border>
</ScrollViewer>
<ItemsControl ItemsSource="{Binding NodeList}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
<ItemsControl ItemsSource="{Binding Connections}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
</Window>
with output
In second case, I am taking templates into ListBox (with combination of CompositeCollection) and I thought it would work since the previous case worked correctly. However, when I launch the program nothing shows.
Code:
<Window x:Class="Grafika.Test1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Grafika"
mc:Ignorable="d"
Title="Test1" Height="600" Width="800" x:Name="view" >
<Window.Resources>
<Style TargetType="Control" x:Key="EmptyStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<Grid Margin="10">
<Grid.Resources>
<CompositeCollection x:Key="Col">
<CollectionContainer Collection="{Binding DataContext.NodeList, Source={x:Reference view}}"/>
<CollectionContainer Collection="{Binding DataContext.Connections, Source={x:Reference view}}"/>
</CompositeCollection>
<!-- -->
<DataTemplate DataType="{x:Type local:Node}">
<Thumb DragDelta="Thumb_DragDelta">
<Thumb.Template>
<ControlTemplate TargetType="Thumb">
<Canvas Margin="-10,-10,10,10">
<Border Height="{Binding Height}" Width="{Binding Width}" x:Name="rect" Background="Red" />
</Canvas>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</DataTemplate>
<!-- -->
<!-- -->
<DataTemplate DataType="{x:Type local:Connector}">
<Line Stroke="Blue" StrokeThickness="3" X1="{Binding Start.X}" Y1="{Binding Start.Y}" X2="{Binding Stop.X}" Y2="{Binding Stop.Y}" x:Name="Con"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Stop}" Value="{x:Null}">
<Setter TargetName="Con" Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
<!-- -->
</Grid.Resources>
<ListBox>
<ListBox.Template>
<ControlTemplate>
<Border>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" Opacity=".3">
<GradientStop Color="Azure" Offset="0"/>
<GradientStop Color="Yellow" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ScrollViewer VerticalScrollBarVisibility ="Auto" HorizontalScrollBarVisibility="Auto">
<Border>
<Border.Background>
<VisualBrush TileMode="Tile" Viewbox="0,0,50,50" Viewport="0,0,50,50" ViewboxUnits="Absolute" ViewportUnits="Absolute">
<VisualBrush.Visual>
<Rectangle Stroke="DarkGray" StrokeThickness="0.5" Height="50" Width="50"/>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
</Border>
</ScrollViewer>
</Border>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemsSource>
<StaticResource ResourceKey="Col"/>
</ListBox.ItemsSource>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas IsItemsHost="True" Background="Cornsilk" Height="{Binding AreaHeight}" Width="{Binding AreaWidth}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource EmptyStyle}"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Grid>
</Window>
My question is simple: Why is nothing displayed in the second case? Is there anything wrong in XAML or potentionally some binding missing? I don't think that code behind is at fault, since the first case is working.
You are setting a new Template for the ListBox without a panel for the items.
If you change the its Template and you don't add a panel that will contain the items, setting ListBox.ItemsPanel won't have any effect.
I've modified the ListBox Template according to your specification, adding a Canvas as container for the items.
<ListBox ItemsSource="{StaticResource Col}">
<ListBox.Template>
<ControlTemplate>
<Border>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" Opacity=".3">
<GradientStop Color="Azure" Offset="0"/>
<GradientStop Color="Yellow" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ScrollViewer VerticalScrollBarVisibility ="Auto" HorizontalScrollBarVisibility="Auto">
<Border>
<Border.Background>
<VisualBrush TileMode="Tile" Viewbox="0,0,50,50" Viewport="0,0,50,50" ViewboxUnits="Absolute" ViewportUnits="Absolute">
<VisualBrush.Visual>
<Rectangle Stroke="DarkGray" StrokeThickness="0.5" Height="50" Width="50"/>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
<Canvas IsItemsHost="True" Background="Cornsilk" Height="{Binding AreaHeight}" Width="{Binding AreaWidth}" />
</Border>
</ScrollViewer>
</Border>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
This is a example for reproducing my problem
<FlipView>
<FlipView.Resources>
<Style TargetType="FlipViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="FlipViewItem">
<ScrollViewer HorizontalAlignment="Center" VerticalAlignment="Center"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center" >
<ContentPresenter />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</FlipView.Resources>
<Rectangle Width="1366" Height="768" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
<GradientStop Color="White"/>
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="White" Offset="0.487"/>
<GradientStop Color="Black" Offset="0.44"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</FlipView>
the scrollviewer's horizental offset will be set back to 0 automatically after you change it.
i think this always happens to the direction which is the same as flipview's scroll direction.
but,how to fix it?
The default ScrollViewer only scrolls when it needs to and your rectangle is smaller than the ScrollViewer. Also - you only have one item. You can try setting its style: Style="{StaticResource HorizontalScrollViewerStyle}". As in these:
<Page
x:Class="App113.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App113"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid
Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<LinearGradientBrush
x:Key="LibearBrush"
EndPoint="0,0"
StartPoint="1,1">
<GradientStop
Color="White" />
<GradientStop
Color="Black"
Offset="1" />
<GradientStop
Color="White"
Offset="0.487" />
<GradientStop
Color="Black"
Offset="0.44" />
</LinearGradientBrush>
</Grid.Resources>
<FlipView>
<FlipView.Resources>
<Style
TargetType="FlipViewItem">
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="FlipViewItem">
<!--Style="{StaticResource VerticalScrollViewerStyle}" is the standard alternative-->
<ScrollViewer
Style="{StaticResource HorizontalScrollViewerStyle}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center">
<ContentPresenter />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</FlipView.Resources>
<Rectangle
Width="2366"
Height="1768"
Fill="{StaticResource LibearBrush}" />
<Rectangle
Width="2366"
Height="1768"
Fill="{StaticResource LibearBrush}" />
<Rectangle
Width="2366"
Height="1768"
Fill="{StaticResource LibearBrush}" />
</FlipView>
</Grid>
</Page>
Is there a way to have a dotted line on the horizontal grid lines in WPF datagrid? I have googled everywhere and cannot seem to find a concrete way of doing so. One solution that may solve this is setting the Datagrid.RowStyle. I have tried this and it causes error. I have binded my datagrid to a datatable. 2 columns are just text and the 3rd one is an image column. For this columns, I used DataGridTemplateColumn. Textblock and Image. I hope you can help me guys...If you want a sample of my code here it is.
<StackPanel>
<dg:DataGrid Name="questionList"
HeadersVisibility="None"
AutoGenerateColumns="False"
Background="White"
Margin="42,32,43,0"
BorderThickness="0"
GridLinesVisibility="Horizontal"
CanUserAddRows="False"
HorizontalGridLinesBrush="#FFCCCCCC"
MaxHeight="549"
Cursor="Hand"
PreviewMouseLeftButtonUp="questionnaireList_PreviewMouseLeftButtonUp">
<dg:DataGrid.CellStyle>
<Style TargetType="{x:Type dg:DataGridCell}">
<Setter Property="BorderThickness" Value="0"/>
</Style>
</dg:DataGrid.CellStyle>
<dg:DataGrid.RowStyle>
<Style TargetType="{x:Type dg:DataGridRow}">
<Setter Property="Background" Value="{Binding MyImage, Converter={x:Static my:StatusColorConverter.instance}}" />
</Style>
</dg:DataGrid.RowStyle>
<dg:DataGrid.Columns>
<dg:DataGridTemplateColumn Width="69*">
<dg:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Margin="12,16,0,17"
FontSize="18"
Foreground="#0891F1"
Text="{Binding Path=Number}"
TextWrapping="Wrap"/>
</DataTemplate>
</dg:DataGridTemplateColumn.CellTemplate>
</dg:DataGridTemplateColumn>
<dg:DataGridTemplateColumn Width="601*">
<dg:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock FontSize="16" Foreground="#666666"
Text="{Binding Path=Desc}"
TextWrapping="Wrap"
TextAlignment="Justify"
Margin="0,16,0,17" />
</DataTemplate>
</dg:DataGridTemplateColumn.CellTemplate>
</dg:DataGridTemplateColumn>
<dg:DataGridTemplateColumn Width="117*">
<dg:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding Path=Imgs}"
Stretch="None"
VerticalAlignment="Top"
HorizontalAlignment="Right"
Margin="0,16,18,17" />
</DataTemplate>
</dg:DataGridTemplateColumn.CellTemplate>
</dg:DataGridTemplateColumn>
</dg:DataGrid.Columns>
</dg:DataGrid>
</StackPanel>
The easiest way to do this is to simply use gradient brushes with absolute mapping modes:
<DataGrid ItemsSource="{Binding People}">
<DataGrid.HorizontalGridLinesBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="3,0" MappingMode="Absolute" SpreadMethod="Repeat">
<GradientStop Offset="0" Color="Black"/>
<GradientStop Offset="0.5" Color="Black"/>
<GradientStop Offset="0.5" Color="Transparent"/>
<GradientStop Offset="1" Color="Transparent"/>
</LinearGradientBrush>
</DataGrid.HorizontalGridLinesBrush>
<DataGrid.VerticalGridLinesBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,3" MappingMode="Absolute" SpreadMethod="Repeat">
<GradientStop Offset="0" Color="Black"/>
<GradientStop Offset="0.5" Color="Black"/>
<GradientStop Offset="0.5" Color="Transparent"/>
<GradientStop Offset="1" Color="Transparent"/>
</LinearGradientBrush>
</DataGrid.VerticalGridLinesBrush>
<DataGrid.Columns>
<DataGridTextColumn Header="First Name" Binding="{Binding FirstName}"/>
<DataGridTextColumn Header="Last Name" Binding="{Binding LastName}" />
</DataGrid.Columns>
</DataGrid>
Result:
You can disable the Horizontal Grid Lines which are drawn in code by specifying GridLinesVisibility="Vertical" in the DataGrid. You could then re-template DataGridRow and add the dashed line at the end of each row
Looks like this:
<DataGrid GridLinesVisibility="Vertical">
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridRow}">
<Border x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<SelectiveScrollingGrid>
<SelectiveScrollingGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</SelectiveScrollingGrid.ColumnDefinitions>
<SelectiveScrollingGrid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</SelectiveScrollingGrid.RowDefinitions>
<DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<DataGridDetailsPresenter Grid.Column="1" Grid.Row="1" SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Visibility="{TemplateBinding DetailsVisibility}"/>
<DataGridRowHeader Grid.RowSpan="2" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
<Path Grid.Row="2" Grid.ColumnSpan="2"
Data="M0,0.5 L1,0.5"
Stretch="Fill" Stroke="Black" StrokeThickness="1"
StrokeDashArray="1.0 2.0"/>
</SelectiveScrollingGrid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.RowStyle>
<!-- ... -->
</DataGrid>
Edit: Here is the Template for the 3.5 DataGrid in the toolkit
<Custom:DataGrid GridLinesVisibility="Vertical">
<Custom:DataGrid.RowStyle>
<Style TargetType="Custom:DataGridRow">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Custom:DataGridRow}">
<Border x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Custom:SelectiveScrollingGrid>
<Custom:SelectiveScrollingGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Custom:SelectiveScrollingGrid.ColumnDefinitions>
<Custom:SelectiveScrollingGrid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Custom:SelectiveScrollingGrid.RowDefinitions>
<Custom:DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Custom:DataGridDetailsPresenter Grid.Column="1" Grid.Row="1" Visibility="{TemplateBinding DetailsVisibility}">
<Custom:SelectiveScrollingGrid.SelectiveScrollingOrientation>
<Binding Path="AreRowDetailsFrozen" RelativeSource="{RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type Custom:DataGrid}}">
<Binding.ConverterParameter>
<Custom:SelectiveScrollingOrientation>Vertical</Custom:SelectiveScrollingOrientation>
</Binding.ConverterParameter>
</Binding>
</Custom:SelectiveScrollingGrid.SelectiveScrollingOrientation>
</Custom:DataGridDetailsPresenter>
<Custom:DataGridRowHeader Grid.RowSpan="2" Custom:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
<Custom:DataGridRowHeader.Visibility>
<Binding Path="HeadersVisibility" RelativeSource="{RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type Custom:DataGrid}}">
<Binding.ConverterParameter>
<Custom:DataGridHeadersVisibility>Row</Custom:DataGridHeadersVisibility>
</Binding.ConverterParameter>
</Binding>
</Custom:DataGridRowHeader.Visibility>
</Custom:DataGridRowHeader>
<Path Grid.Row="2" Grid.ColumnSpan="2"
Data="M0,0.5 L1,0.5"
Stretch="Fill" Stroke="Black" StrokeThickness="1"
StrokeDashArray="1.0 2.0"/>
</Custom:SelectiveScrollingGrid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Custom:DataGrid.RowStyle>
<!-- ... -->
</Custom:DataGrid>