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
Related
I have a ProgressBar with a defined style and I need to change his color (which is defined in the style) at runtime.
I've been trying looking for like an hour, but nothing was helping my problem
Here is my style (ProgressBar.xaml), i need to change, either the value of LPercentBackground1Color and LPercentBackground2Color or where they are used
<SolidColorBrush x:Key="LPercentBackground1Color" Color="Red" />
<SolidColorBrush x:Key="LPercentBackground2Color" Color="White" />
<Style x:Key="NormalStyle" TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Determinate" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="PART_Track" Margin="0" BorderThickness="0" CornerRadius="7" />
<Border x:Name="PART_Indicator" Margin="0" BorderThickness="0" CornerRadius="5" HorizontalAlignment="Left"
Background="{StaticResource LPercentBackground1Color}" ClipToBounds="True">
<Border x:Name="DiagonalDecorator" Width="5000">
<Border.Background>
<DrawingBrush TileMode="Tile" Stretch="None" Viewbox="0,0,1,1" Viewport="0,0,36,34" ViewportUnits="Absolute">
<DrawingBrush.RelativeTransform>
<TranslateTransform X="0" Y="0" />
</DrawingBrush.RelativeTransform>
<DrawingBrush.Drawing>
<GeometryDrawing Brush="{StaticResource LPercentBackground2Color}" Geometry="M0,0 -18,0 -36,34 -18,34 Z" />
</DrawingBrush.Drawing>
</DrawingBrush>
</Border.Background>
</Border>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I can't find how to change those, so i need your help. Thanks !
If you use the DynamicResource markup extension in your template:
Background="{DynamicResource LPercentBackground1Color}"
...you can replace the Brush in the ResourceDictionary at runtime:
Resources["LPercentBackground1Color"] = Brushes.Green;
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 have a custom Slider template and I want to place a content that sits above the Decrease and Repeat buttons but below the thumb. Ive tried adding zindex to the rectangle, which make it appear above everything, but I cannot figure out how to make the thumb appear above the rectangle
<!-- This is what I want to appear above the repeatbuttons but below the thumb -->
<Rectangle Height="8" Width="8" Fill="Yellow" Grid.Row="1" Panel.ZIndex="1" />
<Track x:Name="PART_Track" Grid.Row="1">
<Track.DecreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource DecreaseSliderRepeatButtonStyle}"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource IncreaseSliderRepeatButtonStyle}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb" Style="{StaticResource HorizontalSliderThumbStyle}"/>
</Track.Thumb>
</Track>
Here is the relevant style for the thumb
<Style x:Key="HorizontalSliderThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="Panel.ZIndex" Value="100"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Foreground" Value="Gray"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="#E6323232" CornerRadius="8" Height="16">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!--<TextBlock FontFamily="Arial" x:Name="tbPlaybackTime" Margin="7,0,7,0" Text="09:35:00" FontSize="10" Foreground="#eee" Background="Transparent" VerticalAlignment="Center"/>-->
<TextBlock FontFamily="Arial" x:Name="tbPlaybackTime" Margin="7,0,4,0" Text="09:35:00" FontSize="10" Foreground="#eee" Background="Transparent" VerticalAlignment="Center"/>
<Ellipse Grid.Column="1" Height="16" Width="16" Panel.ZIndex="10000">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.5,0" RadiusX="1" Center="0.5,0.5" >
<RadialGradientBrush.GradientStops>
<GradientStop Color="#ffffff" Offset="0.3" />
<GradientStop Color="#cccccc" Offset="0.8" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.Effect>
<DropShadowEffect BlurRadius="3" Color="Black" Direction="270" Opacity="0.8" ShadowDepth="1" />
</Ellipse.Effect>
</Ellipse>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
here is a solution for placing your custom content over RepeatButton of a Slider
<Track Grid.Row="1"
x:Name="PART_Track">
<Track.Resources>
<ControlTemplate TargetType="RepeatButton"
x:Key="myRepeatbutton">
<Grid Background="Transparent">
<RepeatButton IsHitTestVisible="False"
Content="{TemplateBinding Content}"
Style="{TemplateBinding Style}" />
<Rectangle Height="8"
Width="8"
Fill="Yellow" />
</Grid>
</ControlTemplate>
</Track.Resources>
<Track.DecreaseRepeatButton>
<RepeatButton Command="Slider.DecreaseLarge"
Style="{StaticResource DecreaseSliderRepeatButtonStyle}"
Template="{StaticResource myRepeatbutton}" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource HorizontalSliderThumbStyle}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="Slider.IncreaseLarge"
Style="{StaticResource IncreaseSliderRepeatButtonStyle}"
Template="{StaticResource myRepeatbutton}" />
</Track.IncreaseRepeatButton>
</Track>
Idea is to leverage the Template property of RepeatButton and by using a custom ControlTemplate apply the desired apperance
there are other possible workaround using opacity masks etc. but may be a bit complex to align properly. so if above does not work your expected way, we can opt for that too.
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>