i'm new to WPF, I'm going to implement Gantt Chart view with respective date and Time
When i tried i can able to plot Gantt-view but not with respective date and Time, can any one help me out from this.
I want to implement the same with respective of both Time and date dynamically not static.
Thanks in advance..
Expected Gantt View is
but current implement as below:
Below is my WPF code:
<Window x:Class="FunctionalFun.UI.ItemsControlExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:gc="clr-namespace:FunctionalFun.UI"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="Gantt Example" Height="708" Width="1080">
<Grid>
<DataGrid AutoGenerateColumns="True" ColumnHeaderHeight="50" RowHeight="50" ColumnWidth="250" ItemsSource="{Binding}" RenderTransformOrigin="3.25,5.846" Height="526" Width="931" Canvas.Top="70" Canvas.Left="69">
</DataGrid>
<Grid Name="firstGrid" Width="Auto" Height="Auto">
<Grid.Resources>
<x:Array x:Key="Tasks" Type="{x:Type gc:Task}">
<gc:Task Name="Task 1" Start="03:45" End="10:10"/>
</x:Array>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Grid.Effect>
<DropShadowEffect Color="#FFDEDADA" ShadowDepth="3"/>
</Grid.Effect>
<ItemsControl Grid.Row="0" ItemsSource="{StaticResource Tasks}" Margin="100,80,0,-100">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<gc:GanttRowPanel MinDate="03:45" MaxDate="23:00"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="gc:GanttRowPanel.StartDate" Value="{Binding Path=Start}"/>
<Setter Property="gc:GanttRowPanel.EndDate" Value="{Binding Path=End}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#FF007F99" BorderThickness="0.1">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF2FD9FD" Offset="0"/>
<GradientStop Color="#FFCAF6FF" Offset="0.112"/>
<GradientStop Color="#FF47D8F7" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="{Binding Path=Name}" HorizontalAlignment="Center" VerticalAlignment="Center" ToolTip="{Binding Path=Name}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
<Grid Width="Auto" Height="Auto">
<Grid.Resources>
<x:Array x:Key="Tasks" Type="{x:Type gc:Task}">
<gc:Task Name="Task 2" Start="10:10" End="22:00"/>
</x:Array>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<ItemsControl Grid.Row="1" ItemsSource="{StaticResource Tasks}" Margin="60,120,0,-140">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<gc:GanttRowPanel MinDate="03:45" MaxDate="23:00"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="gc:GanttRowPanel.StartDate" Value="{Binding Path=Start}"/>
<Setter Property="gc:GanttRowPanel.EndDate" Value="{Binding Path=End}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#FF007F99" BorderThickness="0.1">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#d1b57f" Offset="0"/>
<GradientStop Color="#d1b57f" Offset="0.112"/>
<GradientStop Color="#d1b57f" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="{Binding Path=Name}" HorizontalAlignment="Center" VerticalAlignment="Center" ToolTip="{Binding Path=Name}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
<Grid Width="Auto" Height="Auto">
<Grid.Resources>
<x:Array x:Key="Tasks" Type="{x:Type gc:Task}">
<gc:Task Name="Task 3" Start="08:10" End="18:00"/>
</x:Array>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<ItemsControl Grid.Row="2" ItemsSource="{StaticResource Tasks}" Margin="60,160,0,-180">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<gc:GanttRowPanel MinDate="03:45" MaxDate="23:00"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="gc:GanttRowPanel.StartDate" Value="{Binding Path=Start}"/>
<Setter Property="gc:GanttRowPanel.EndDate" Value="{Binding Path=End}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#FF007F99" BorderThickness="0.1">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#aa4206" Offset="0"/>
<GradientStop Color="#aa4206" Offset="0.112"/>
<GradientStop Color="#aa4206" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="{Binding Path=Name}" HorizontalAlignment="Center" VerticalAlignment="Center" ToolTip="{Binding Path=Name}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
<Grid Width="Auto" Height="Auto">
<Grid.Resources>
<x:Array x:Key="Tasks" Type="{x:Type gc:Task}">
<gc:Task Name="Task 4" Start="03:10" End="11:00"/>
</x:Array>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<ItemsControl Grid.Row="2" ItemsSource="{StaticResource Tasks}" Margin="60,200,0,-220">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<gc:GanttRowPanel MinDate="03:00" MaxDate="23:00"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="gc:GanttRowPanel.StartDate" Value="{Binding Path=Start}"/>
<Setter Property="gc:GanttRowPanel.EndDate" Value="{Binding Path=End}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#FF007F99" BorderThickness="0.1">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#f7dd16" Offset="0"/>
<GradientStop Color="#f7dd16" Offset="0.112"/>
<GradientStop Color="#f7dd16" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="{Binding Path=Name}" HorizontalAlignment="Center" VerticalAlignment="Center" ToolTip="{Binding Path=Name}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
<Grid Width="Auto" Height="Auto">
<Grid.Resources>
<x:Array x:Key="Tasks" Type="{x:Type gc:Task}">
<gc:Task Name="Task 5" Start="17:10" End="23:00"/>
</x:Array>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<ItemsControl Grid.Row="4" ItemsSource="{StaticResource Tasks}" Margin="60,240,0,-260">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<gc:GanttRowPanel MinDate="03:00" MaxDate="23:00"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="gc:GanttRowPanel.StartDate" Value="{Binding Path=Start}"/>
<Setter Property="gc:GanttRowPanel.EndDate" Value="{Binding Path=End}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#FF007F99" BorderThickness="0.1">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#c4ef6e" Offset="0"/>
<GradientStop Color="#c4ef6e" Offset="0.112"/>
<GradientStop Color="#c4ef6e" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="{Binding Path=Name}" HorizontalAlignment="Center" VerticalAlignment="Center" ToolTip="{Binding Path=Name}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
<Grid Width="Auto" Height="Auto">
<Grid.Resources>
<x:Array x:Key="Tasks" Type="{x:Type gc:Task}">
<gc:Task Name="Task 7" Start="07:10" End="17:30"/>
</x:Array>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<ItemsControl Grid.Row="5" ItemsSource="{StaticResource Tasks}" Margin="60,280,0,-300">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<gc:GanttRowPanel MinDate="03:00" MaxDate="23:00"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="gc:GanttRowPanel.StartDate" Value="{Binding Path=Start}"/>
<Setter Property="gc:GanttRowPanel.EndDate" Value="{Binding Path=End}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#FF007F99" BorderThickness="0.1">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#7bb507" Offset="0"/>
<GradientStop Color="#7bb507" Offset="0.112"/>
<GradientStop Color="#7bb507" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="{Binding Path=Name}" HorizontalAlignment="Center" VerticalAlignment="Center" ToolTip="{Binding Path=Name}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
<Grid Width="Auto" Height="Auto">
<Grid.Resources>
<x:Array x:Key="Tasks" Type="{x:Type gc:Task}">
<gc:Task Name="Task 6" Start="07:10" End="17:30"/>
</x:Array>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<ItemsControl Grid.Row="7" ItemsSource="{StaticResource Tasks}" Margin="60,280,0,-300">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<gc:GanttRowPanel MinDate="03:00" MaxDate="23:00"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="gc:GanttRowPanel.StartDate" Value="{Binding Path=Start}"/>
<Setter Property="gc:GanttRowPanel.EndDate" Value="{Binding Path=End}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#FF007F99" BorderThickness="0.1">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#7bb507" Offset="0"/>
<GradientStop Color="#7bb507" Offset="0.112"/>
<GradientStop Color="#7bb507" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="{Binding Path=Name}" HorizontalAlignment="Center" VerticalAlignment="Center" ToolTip="{Binding Path=Name}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Grid>
</Window>
Update 1:
above code is only with respective date, but
I want to implement the same with respective of both Time and date dynamically not static.
Related
I have a TabControl which is bound to ViewModel. I want to set the margin of the auto generated TabPanel, but I am unable to do so, because I think the style is set inline via TabControl's implementation...
Here is my style...
<TabControl.Resources>
<Style TargetType="{x:Type TabPanel}">
<Setter Property="Margin" Value="14,0,0,0" />
</Style>
</TabControl.Resources>
and the resulting style using Visual Studio's Live Property Explorer is like this...
UPDATE 1:
Here is the XAML for ItemTemplate that generates the TabPanel itself:
<TabControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="150" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Source="{Binding ImageUri}"
Height="25" Width="35" Margin="0,0,0,10" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding TestName}" TextAlignment="Center"
TextWrapping="Wrap" FontFamily="Open Sans" FontWeight="Regular" FontSize="14" />
</Grid>
</DataTemplate>
</TabControl.ItemTemplate>
You need to override the TabControl template to customize the appearance. In this case you will be responsible for designing template, but also will be able to customize it in a way you like.
Example template is taken from MSDN
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="" Width="500" Height="500">
<Window.Resources>
<Style TargetType="{x:Type TabControl}">
<Setter Property="OverridesDefaultStyle"
Value="True" />
<Setter Property="SnapsToDevicePixels"
Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="#FFAAAAAA" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TabPanel x:Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="14,0,4,0"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="Transparent" />
<Border x:Name="Border"
Grid.Row="1"
BorderThickness="1"
CornerRadius="2"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="{DynamicResource ContentAreaColorLight}" Offset="0" />
<GradientStop Color="{DynamicResource ContentAreaColorDark}" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<ContentPresenter x:Name="PART_SelectedContentHost" Margin="4" ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TabControl ItemsSource="{Binding Path=Items}">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="150" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding .}" TextAlignment="Center"
TextWrapping="Wrap" FontFamily="Open Sans" FontWeight="Regular" FontSize="14" />
</Grid>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
I have a XAML DataTemplate like this being applied to ListBoxItems. Notice the grid near the bottom. What I would like to do is change the color of the bound text based on the value of the text, as in 'Status: ERROR' where 'ERROR' is red.
<DataTemplate x:Key="ItemTemplate">
<Border BorderBrush="Gray" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FFA9A9A9" Offset="1.0"/>
<GradientStop Color="#FFF4F4F5" Offset="0.0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Label Content="{Binding Name}" FontSize="22" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center"/>
<Rectangle Grid.Row="1" Grid.Column="0" Grid.RowSpan="3">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FFF0F0F1" Offset="1.0"/>
<GradientStop Color="#FFF4F4F5" Offset="0.0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid Grid.Row="1" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Content="Status:"/>
<Label Content="{Binding Status}" Grid.Column="1"/>
</Grid>
<Label Content="{Binding Bookmark}" ContentStringFormat="Last Bookmark: {0}" Grid.Row="3" Grid.Column="0"/>
</Grid>
</Border>
</DataTemplate>
How do I change the color of the text text in that bound Status <Label> from code behind (C#)?
(Or, if not from code behind, how in XAML? Status can have 3 text values (Queued, Running, and Error) and each is matched with an assigned color (Blue, Green, and Red))
Based on #SLaks hint, I was able to work out the complete answer. Here it is for others:
This:
<Grid Grid.Row="1" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Content="Status:"/>
<Label Content="{Binding Status}" Grid.Column="1"/>
</Grid>
Becomes this:
<Grid Grid.Row="1" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Content="Status:"/>
<Label Content="{Binding Status}" Grid.Column="1">
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding Status}" Value="RUNNING">
<Setter Property="Label.Foreground" Value="Green"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Status}" Value="ERROR">
<Setter Property="Label.Foreground" Value="Red"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Status}" Value="QUEUED">
<Setter Property="Label.Foreground" Value="Blue"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</Grid>
I would like to add a Click Handler to my ListViewItems. I have found many Tutorials on how to do that but I have problems recreating that inside my ResourceDictionary. My Question is how can I define the ItemContainerStyle there. It doesn't work like this:
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border BorderBrush="#5076A7" BorderThickness="1">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFFFFF" Offset="0.0"/>
<GradientStop Color="#C0D3EA" Offset="1.0"/>
</LinearGradientBrush>
</Border.Background>
<StackPanel TextElement.FontFamily="Segoe UI" TextElement.FontSize="12">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="15"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Padding="3,0,0,0" Text="{Binding Betreff}" TextTrimming="CharacterEllipsis" Grid.Column="0" Grid.Row="0"/>
<Button FontSize="7" Content="X" Grid.Column="1" Grid.Row="0"
Command="{Binding DataContext.DeleteButtonCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
CommandParameter="{Binding ItemId}"/>
</Grid>
<StackPanel Orientation="Horizontal">
<TextBlock Padding="3,0,0,0" Text="{Binding Kunde}"/>
<TextBlock Padding="3,0,0,0" Text="|"/>
<TextBlock Padding="3,0,0,0" Text="{Binding IncidentId}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock FontWeight="Bold" Padding="3,0,0,0" Text="{Binding Ort}"/>
<TextBlock Padding="3,0,0,0" Text="("/>
<TextBlock Text="{Binding Alternative}"/>
<TextBlock Text=")"/>
</StackPanel>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<EventSetter Event="PreviewMouseLeftButtonDown" Handler="ListViewItem_PreviewMouseLeftButtonDown" />
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Betreff}" Value="Blocked">
<Setter Property="Template" Value="{StaticResource BlockedListViewItem}"/>
</DataTrigger>
</Style.Triggers>
</Style>
Move the Style to your MainWindow's Resources and add the EventSetter directly to the ListViewItem Style:
<Style TargetType="ListViewItem">
...
<EventSetter Event="PreviewMouseLeftButtonDown"
Handler="ListViewItem_PreviewMouseLeftButtonDown"/>
</Style>
I've removed header, footer and borders from RadDataForm:
<t:RadDataForm ItemsSource="{Binding Item}" MinHeight="300" MinWidth="300"
AutoEdit="True" BorderThickness="0" Background="Transparent"
CommandButtonsVisibility="None" BorderBrush="Transparent"
ValidationSummaryVisibility="Collapsed" />
But two lines still present. How to remove horizontal lines?
Have you ever tried to style a control by using Blend?
Note that I use Silverlight, but it should be the same.
However put this property into you RadDataForm control:
Style="{StaticResource RadDataFormStyle1}"
Now it should look like this:
<t:RadDataForm ItemsSource="{Binding Item}" MinHeight="300" MinWidth="300"
AutoEdit="True" BorderThickness="0" Background="Transparent"
CommandButtonsVisibility="None" BorderBrush="Transparent"
ValidationSummaryVisibility="Collapsed"
Style="{StaticResource RadDataFormStyleNoBorders}" />
Now you have to set a style resource. You can put the style resource into app.xaml or in the same page of the control.
For example I have an sdk:Page. For embed the Style in the same page of the control you have to do this:
<sdk:Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:t="http://schemas.telerik.com/2008/xaml/presentation"
[other page things...]
......>
<!-- COPY FROM HERE, REPLACE ALL "telerik:" with yours "t:" and "sdk:" with your page namespace -->
<sdk:Page.Resources>
<SolidColorBrush x:Key="DataForm_HeaderOuterBorder" Color="#FF282828"/>
<SolidColorBrush x:Key="DataForm_HeaderInnerBorder" Color="#FFB5B5B5"/>
<LinearGradientBrush x:Key="DataForm_HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF5B5B5B" Offset="1"/>
<GradientStop Color="#FF868686"/>
<GradientStop Color="#FF4F4F4F" Offset="0.42"/>
<GradientStop Color="#FF0E0E0E" Offset="0.43"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="DataForm_HeaderForeground" Color="White"/>
<Telerik_Windows_Controls_Data_DataForm:DescriptionVisibilityConverter x:Key="DescriptionVisibilityConverter"/>
<SolidColorBrush x:Key="DataFormPanel_Border" Color="#FF848484"/>
<LinearGradientBrush x:Key="DataForm_FooterPanel_Background" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFB5B5B5"/>
<GradientStop Color="#FFF0F0F0" Offset="0.5"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="Background_Disabled" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#7F000000"/>
<GradientStop Color="#7F000000" Offset="1"/>
<GradientStop Color="#33000000" Offset="0.5"/>
</LinearGradientBrush>
<telerik:InvertedBooleanToVisibilityConverter x:Key="InvertedBooleanToVisibilityConverter"/>
<ControlTemplate x:Key="RadDataFormTemplate" TargetType="telerik:RadDataForm">
<Border x:Name="PART_RootElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Grid x:Name="PART_DataFormGrid" Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border x:Name="Header" BorderBrush="{StaticResource DataForm_HeaderOuterBorder}" BorderThickness="1" Margin="-1,-1,-1,0" Visibility="{Binding Header, Converter={StaticResource DescriptionVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}">
<Border BorderBrush="{StaticResource DataForm_HeaderInnerBorder}" BorderThickness="1" Background="{StaticResource DataForm_HeaderBackground}">
<ContentControl x:Name="PART_ContentPresenter" Content="{TemplateBinding Header}" Foreground="{StaticResource DataForm_HeaderForeground}" FontWeight="Bold" HorizontalContentAlignment="Stretch" Margin="4,6,4,6" VerticalAlignment="Center" VerticalContentAlignment="Top"/>
</Border>
</Border>
<Telerik_Windows_Controls_Data_DataForm:CollectionNavigator x:Name="CollectionNavigator" Grid.Row="1" telerik:StyleManager.Theme="{StaticResource Theme}" BorderBrush="{x:Null}"/>
<Border BorderThickness="0,0,0,1" Grid.Row="2">
<ScrollViewer x:Name="PART_ItemsScrollViewer" ScrollViewer.HorizontalScrollBarVisibility="Auto" IsTabStop="False" telerik:StyleManager.Theme="{StaticResource Theme}" ScrollViewer.VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Vertical">
<Telerik_Windows_Controls_Data_DataForm:AutoGeneratedFieldsPresenter x:Name="PART_AutoGeneratedFieldsPresenter" AutoGenerateFields="{Binding AutoGenerateFields, RelativeSource={RelativeSource TemplatedParent}}" CurrentItem="{Binding CurrentItem}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
<ContentPresenter x:Name="PART_FieldsContentPresenter" Content="{Binding CurrentItem}"/>
</StackPanel>
</ScrollViewer>
</Border>
<Telerik_Windows_Controls_Data_DataForm:DataFormValidationSummary x:Name="PART_ValidationSummary" Grid.Row="3" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="{TemplateBinding ValidationSummaryVisibility}"/>
<Border x:Name="FooterPanel_Background" Background="{StaticResource DataForm_FooterPanel_Background}" Grid.Row="4">
<StackPanel x:Name="PART_FooterPanel" HorizontalAlignment="Right" Orientation="Horizontal">
<telerik:RadButton x:Name="PART_CommitButton" Content="{TemplateBinding CommitButtonContent}" Command="controls:RadDataFormCommands.CommitEdit" Margin="2,4,4,4" MinWidth="48" MinHeight="20" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="{Binding CommitButtonVisibility}"/>
<telerik:RadButton x:Name="PART_CancelButton" Content="{TemplateBinding CancelButtonContent}" Command="controls:RadDataFormCommands.CancelEdit" Margin="2,4,4,4" MinWidth="48" MinHeight="20" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="{Binding CancelButtonVisibility}"/>
</StackPanel>
</Border>
<Border x:Name="Background_Disabled" Background="{StaticResource Background_Disabled}" IsHitTestVisible="False" Grid.RowSpan="5" Visibility="{Binding IsEnabled, Converter={StaticResource InvertedBooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
</Grid>
</Border>
</ControlTemplate>
<SolidColorBrush x:Key="DataField_Foreground" Color="Black"/>
<Style x:Key="RadDataFormNoBorders" TargetType="telerik:RadDataForm">
<Setter Property="Template" Value="{StaticResource RadDataFormTemplate}"/>
<Setter Property="Foreground" Value="{StaticResource DataField_Foreground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}"/>
<Setter Property="Background" Value="{StaticResource ControlBackground}"/>
<Setter Property="BorderThickness" Value="1"/>
</Style>
</sdk:Page.Resources>
<!-- STOP COPING HERE, NOW YOU CAN PASTE, REMEMBER TO REPLACE --> ........
Alternatively you can try to use the theming property provided by Telerik:
telerik:Theming.Theme="Transparent"
this property allow you to don't style the control, but it changes the appearance of all your control, and it is possible that you don't like this theme.
so i have been trying to style a scrollviewer, so that i can change the appearance of a scroll bar. But the problem I am facing, is that when I apply the scrollviewer style to the ListBox, I never see the content anymore.
This is the current style I have: (Unchanged from the default at the moment)
<Style x:Key="CustomScrollViewerStyle" TargetType="ScrollViewer">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="VerticalScrollBarVisibility" Value="Visible"/>
<Setter Property="Padding" Value="4"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollContentPresenter x:Name="ScrollContentPresenter" Cursor="{TemplateBinding Cursor}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}"/>
<Rectangle Grid.Column="1" Fill="#FFE9EEF4" Grid.Row="1"/>
<ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Margin="0,-1,-1,-1" Minimum="0" Orientation="Vertical" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" Width="18"/>
<ScrollBar x:Name="HorizontalScrollBar" Grid.Column="0" Height="18" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Margin="-1,0,-1,-1" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And my actual ListBox xaml is:
<Grid x:Name="LayoutRoot" Background="Transparent" Height="250">
<ListBox x:Name="iListBox" DataContext="{Binding}" ItemsSource="{Binding Path=ListVM.MyCollection}"
BorderBrush="Transparent" Background="Transparent"
ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
<ListBox.Template>
<ControlTemplate TargetType="ItemsControl">
<ScrollViewer Style="{StaticResource CustomScrollViewerStyle}"/>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate >
<DataTemplate >
<Grid Background="Transparent" Loaded="Grid_Loaded">
<IReviewerList1:MyCollectionDataItem />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Currently all I see is a scrollbar and no dataItems anymore. Was wondering what i was doing wrong? Any help would be great.
Thanks
The problem is that the ListBox doesn't know where to inject it's Items. If you insert a ItemsPresenter in the styled ScrollViewer the items should be visible again.
<ListBox.Template>
<ControlTemplate TargetType="ItemsControl">
<ScrollViewer Style="{StaticResource CustomScrollViewerStyle}">
<!-- I'm not sure if the correct name is necessary, or if
it's just for applying visual states -->
<ItemsPresenter x:Name="itemsPresenter" />
</ScrollViewer>
</ControlTemplate>
</ListBox.Template>