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>
Related
I needed to define 2 ScrollBars for one ScrollViewer UWP ScrollBar styles. Styles work but there was a problem, I lost the ability to scroll with touch. After I touch the Thumb, it is no longer attached to the mouse wheel and can only be moved with a mouse click.
<Style x:Key="ScrollViewerStyle" TargetType="ScrollViewer">
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Padding" Value="0" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Border x:Name="Root"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
>
<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"
Grid.RowSpan="2"
Grid.ColumnSpan="2"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}" />
<ScrollBar
Grid.Column="1"
HorizontalAlignment="Right"
IsTabStop="False"
Maximum="{TemplateBinding ScrollableHeight}"
Orientation="Vertical"
ViewportSize="{TemplateBinding ViewportHeight}"
Value="{TemplateBinding VerticalOffset}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Style="{StaticResource VerticalScrollBar}"
/>
<ScrollBar
IsTabStop="False"
Maximum="{TemplateBinding ScrollableWidth}"
Orientation="Horizontal"
Grid.Row="1"
ViewportSize="{TemplateBinding ViewportWidth}"
Value="{TemplateBinding HorizontalOffset}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
Style="{StaticResource HorizontalScrollBar}"
/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Who knows how to solve this problem?
I changed the style a little and the scrolling worked
<Style x:Key="ScrollViewerStyle" TargetType="ScrollViewer">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Border x:Name="Root"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
>
<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"
Grid.RowSpan="2"
Grid.ColumnSpan="2"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}" />
<ScrollBar x:Name="PART_VerticalScrollBar"
Grid.Column="1"
Orientation="Vertical"
ViewportSize="{TemplateBinding ViewportHeight}"
Value="{TemplateBinding VerticalOffset}"
Maximum="{TemplateBinding ScrollableHeight}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Style="{StaticResource VerticalScrollBar}"/>
<ScrollBar x:Name="PART_HorizontalScrollBar"
Grid.Row="1"
Orientation="Horizontal"
ViewportSize="{TemplateBinding ViewportWidth}"
Value="{TemplateBinding HorizontalOffset}"
Maximum="{TemplateBinding ScrollableWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
Style="{StaticResource HorizontalScrollBar}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
It is worth noting that for the Track you need to specify the name x: Name = "PART_Track", so that the custom Thumb would work on pressing
<Style x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="Bg" SnapsToDevicePixels="False">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Grid.Column="1"/>
<Track x:Name="PART_Track"
IsDirectionReversed="False"
IsEnabled="{TemplateBinding IsMouseOver}"
Grid.Column="1">
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumbHorizontal}"
Height="{TemplateBinding Height}"/>
</Track.Thumb>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I hope this helped not only me)
I need to display all the tab headers in a dropdownlist.I have implemented the tab and added the down arrow button to it. I added a popup to list the items along with the button. But i cannot find a way to bind the header of the tab items to the list in the pop (Name = PresetPopup). I have tried binding the itemsource of "ConnectionList". But the ConnectionList is not recogonized in the ConnectionPages.xaml.cs file. Any code how to bind this will be helpful. Or any other way to do this?
<Style TargetType="{x:Type TabControl}">
<Setter Property="Padding" Value="2"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0">
<TabPanel x:Name="headerPanel" Background="Transparent" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
<Border Height="30" VerticalAlignment="Center" BorderBrush="LightGray" BorderThickness="1">
<Grid>
<materialDesign:PackIcon Kind="ArrowDropDown" VerticalAlignment="Center" Width="15" />
<ToggleButton Name="OpenPopupButton" Background="Transparent" BorderBrush="Transparent" VerticalAlignment="Center">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="BorderThickness" Value="0"/>
</Style>
</ToggleButton.Style>
<materialDesign:PackIcon Background="White" Foreground="Black" Kind="ArrowDropDown" Height="15" VerticalAlignment="Center" Width="15" />
</ToggleButton>
<Popup Name="PresetPopup" IsOpen="{Binding ElementName=OpenPopupButton, Path=IsChecked}" PlacementTarget="{Binding ElementName=OpenPopupButton}" AllowsTransparency="True" PopupAnimation="Slide" StaysOpen="False" >
<ListBox Name="ConnectionList" ItemsSource="{Binding ConnectionsTab}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="a"></TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Popup>
</Grid>
</Border>
</StackPanel>
<Border x:Name="contentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
...........
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Actually my final output requirement is similiar to this
final output
I recently started learning WPF and I ran into a small problem. I am trying to create a basic button shape (Transparent) that would fit my style that I made in Photoshop.
Here is the shape (Its like a box with a triangle on each side).
http://prntscr.com/g3esel
If its easier to do it in Blend and implement it into visual then Id love to know how.
BUTTON STYLE:
<Style x:Key="Clicky" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Orientation="Horizontal">
<Grid Height="74" Width="284" Background="{TemplateBinding Background}"/>
<TextBlock Text="{TemplateBinding Content}" TextAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Button.Opacity" Value="10" />
</Trigger>
</Style.Triggers>
</Style>
Thank you!
You need to create a ControlTemplate for the Button. This can be done both in Blend and Visual Studio. I did it in VS2015.
Here is your code:
But, for the future, try to do some work yourself before posting the question. Include just enough code to allow others to reproduce the problem. For help with this, read How to create a Minimal, Complete, and Verifiable example.
<Grid Background="Red">
<Button Height="52" Opacity="0.8">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="#053755" Offset="0" />
<GradientStop Color="#053755" Offset="0.5" />
<GradientStop Color="#061F31" Offset="0.5" />
<GradientStop Color="#061F31" Offset="1.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Margin="-1,0" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,1">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"/>
</Border>
<Path Fill="{TemplateBinding Background}" Data="M13,0 0,25 0,27 13,52 13,52" Stroke="{TemplateBinding BorderBrush}" Width="13" Stretch="Fill" ClipToBounds="True"/>
<Path Grid.Column="2" Data="M0,0 13,25 13,27 0,52" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" Width="13" Stretch="Fill" ClipToBounds="True"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</Grid>
I'm working on a ColorPicker Control and decided it would be best to compose it of primitive Controls to be able to rearrange the various sliders and the color wheel in a control template without having to redefine everything. (Also the Controls code would become pretty messy)
I have created a new Template for the Slider Control and I want it to be scalable. For now, the size of the thumb is fixed, as is the center "Track".
<Style x:Key="ColorSlider" TargetType="{x:Type Slider}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Rectangle Grid.Column="1" Width="80" Height="480" VerticalAlignment="Center" HorizontalAlignment="Center">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="White" Offset="0.0"/>
<GradientStop Color="Black" Offset="1.0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Track x:Name="PART_Track">
<Track.Thumb>
<Thumb x:Name="ValueThumb">
<Thumb.Style>
<Style TargetType="Thumb">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Canvas Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<Rectangle Width="100" Height="20" Fill="Transparent"/>
<Polygon Points="0,0 0,20 10,10" Fill="Black" />
<Polygon Points="100,0 100,20 90,10" Fill="Black" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Track.Thumb>
</Track>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
One way to make the control scalable would be to use a Grid however that would get messy as well since the thumb would have to extend over 3 columns and it would then be difficult to get the proportions of the thumb right.
Are there any best practices for making a control scalable? A Viewbox for example would only magnify the result and probably lower the visual quality. Are there any other methods that one could use?
UPDATE 1: To address the comments: here is an example using a Grid:
<Style x:Key="ColorSlider" TargetType="{x:Type Slider}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="5" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" MinHeight="5" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="10" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" MinWidth="10" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="1" Grid.Row="1">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="White" Offset="0.0"/>
<GradientStop Color="Black" Offset="1.0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Track x:Name="PART_Track" Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="0" Grid.RowSpan="2">
<Track.Thumb>
<Thumb x:Name="ValueThumb">
<Thumb.Style>
<Style TargetType="Thumb">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Canvas Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<Rectangle Height="20" Fill="Transparent"/>
<Polygon Points="0,0 0,20 10,10" Fill="Black" />
<Polygon Points="100,0 100,20 90,10" Fill="Black" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Track.Thumb>
</Track>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
this however still won't scale the thumb triangles and there is also a visual problem for which I have no idea how it could be solved in XAML only. That is, the thumb extends over the bar to the bottom.
UPDATE 2: To make the question more specific and hopefully less "opinion based", the question can be reformulated to:
What options does one have available to make a control composed of various parts and the example above in particular scalable.
The simplest way is going to be a viewbox.
http://wpftutorial.net/ViewBox.html
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.