Develop Reference

Left hand side vertical scrollbar for a WPF DataGrid: Column widths do not fill correctly

I have two wpf DataGrids side by side showing different sides of market orders.
I have been able to move the vertical scrollbar in the DataGrid on the left hand side to the left using a style with a control template for the ScrollViewer.
The last datagrid column width is set to * so that the columns fill all the available space and the horizontal scrollbar should never appear.
This works correctly when the scrollbars are not visible and when the right side vertical scrollbar is visible.
The problem is that the datagrid columns do not fill the available space correctly when the vertical scrollbar is visible on the left hand side DataGrid.
The last column get shortened by the width of the scrollbar and it appears that an empty extra column is place beside it.
Here is the style that I am using:
<Style x:Key="leftScrollbar" TargetType="{x:Type DataGrid}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="RowDetailsVisibilityMode" Value="Collapsed"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGrid}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<ScrollViewer x:Name="DG_ScrollViewer" Focusable="false">
<ScrollViewer.Template>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollBar
x:Name="PART_VerticalScrollBar"
Grid.Column="0"
Grid.Row="1"
Orientation="Vertical"
Width="10"
Maximum="{TemplateBinding ScrollableHeight}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
ViewportSize="{TemplateBinding ViewportHeight}"/>
<ScrollContentPresenter
x:Name="PART_ScrollContentPresenter"
Grid.Column="1"
Grid.ColumnSpan="2"
Grid.Row="1"
CanContentScroll="{TemplateBinding CanContentScroll}"
/>
<DataGridColumnHeadersPresenter
x:Name="PART_ColumnHeadersPresenter"
Grid.Column="2"
Grid.Row="0"
Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Column}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
Background="#00FFFFFF"
FontSize="10.5"/>
<Grid
Grid.Column="2"
Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding NonFrozenColumnsViewportHorizontalOffset, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ScrollBar x:Name="PART_HorizontalScrollBar"
Grid.Column="1"
Maximum="{TemplateBinding ScrollableWidth}"
Orientation="Horizontal"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
ViewportSize="{TemplateBinding ViewportWidth}"/>
</Grid>
</Grid>
</ControlTemplate>
</ScrollViewer.Template>
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger Property="HeadersVisibility" Value="Column">
<Setter Property="RowHeaderWidth" Value="0" />
</Trigger>
</Style.Triggers>
</Style>

UWP Create a content dialog with one big button

I'm trying to create a content dialog with only one button in the center
I've trying to change the style for the content dialog using style code but nothing changed iI Still have two button and if i use only one the button keeps on the left
Here's my code
<!-- Default style for Windows.UI.Xaml.Controls.ContentDialog -->
<Style TargetType="ContentDialog">
<Setter Property="Foreground" Value="{ThemeResource SystemControlPageTextBaseHighBrush}" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="MaxHeight" Value="{ThemeResource ContentDialogMaxHeight}" />
<Setter Property="MinHeight" Value="{ThemeResource ContentDialogMinHeight}" />
<Setter Property="MaxWidth" Value="{ThemeResource ContentDialogMaxWidth}" />
<Setter Property="MinWidth" Value="{ThemeResource ContentDialogMinWidth}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentDialog">
<Border x:Name="Container">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="BackgroundElement"
Background="{TemplateBinding Background}"
FlowDirection="{TemplateBinding FlowDirection}"
BorderThickness="{ThemeResource ContentDialogBorderWidth}"
BorderBrush="{ThemeResource SystemControlForegroundAccentBrush}"
MaxWidth="{TemplateBinding MaxWidth}"
MaxHeight="{TemplateBinding MaxHeight}"
MinWidth="{TemplateBinding MinWidth}"
MinHeight="{TemplateBinding MinHeight}" >
<Grid x:Name="DialogSpace" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer x:Name="ContentScrollViewer"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Disabled"
ZoomMode="Disabled"
Margin="{ThemeResource ContentDialogContentScrollViewerMargin}"
IsTabStop="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="Title"
Margin="{ThemeResource ContentDialogTitleMargin}"
Content="{TemplateBinding Title}"
ContentTemplate="{TemplateBinding TitleTemplate}"
FontSize="20"
FontFamily="XamlAutoFontFamily"
FontWeight="Normal"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
IsTabStop="False"
MaxHeight="{ThemeResource ContentDialogTitleMaxHeight}" >
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter
Content="{TemplateBinding Content}"
MaxLines="2"
TextWrapping="Wrap"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
<ContentPresenter x:Name="Content"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
FontSize="{ThemeResource ControlContentThemeFontSize}"
FontFamily="{ThemeResource ContentControlThemeFontFamily}"
Margin="{ThemeResource ContentDialogContentMargin}"
Foreground="{TemplateBinding Foreground}"
Grid.Row="1"
TextWrapping="Wrap" />
</Grid>
</ScrollViewer>
<Grid x:Name="CommandSpace" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border x:Name="Button1Host"
Margin="{ThemeResource ContentDialogButton1HostMargin}"
MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
Height="{ThemeResource ContentDialogButtonHeight}"
HorizontalAlignment="Center" />
</Grid>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have change the style and I have only one button call Button1Host but when i create a content dialog nothing changed I've tryed to copy that code to my content dialog xaml using <page.Resoures> but I got the same value
Hope you help me

Find the CommandSpace Grid and set the its first column width to 0.
<Grid x:Name="CommandSpace"
Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border x:Name="Button1Host"
Margin="{ThemeResource ContentDialogButton1HostMargin}"
MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
MinHeight="{ThemeResource ContentDialogButtonMinHeight}" />
<Border x:Name="Button2Host"
Margin="{ThemeResource ContentDialogButton2HostMargin}"
MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
MinHeight="{ThemeResource ContentDialogButtonMinHeight}"
Grid.Column="1" />
</Grid>

Why don't you try something with the content template and not use the primary or secondary buttons. Have a look at the below code:
<ContentDialog x:Name="contentD">
<ContentDialog.ContentTemplate>
<DataTemplate>
<Grid Background="Pink">
<Button Content="My Lonely Button" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="5"/>
</Grid>
</DataTemplate>
</ContentDialog.ContentTemplate>
</ContentDialog>

How do I remove the Buttons from the UWP TimePicker

I need to remove the bottom Buttons from the TimePicker-Controll Flyout.
This style does it, but I can't see where the magic happens:
<Style x:Key="TimePickerStyle1" TargetType="TimePicker">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Foreground" Value="{ThemeResource TimePickerForegroundThemeBrush}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TimePicker">
<Border x:Name="LayoutRoot"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0">
<Grid Margin="{TemplateBinding Padding}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentPresenter x:Name="HeaderContentPresenter"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
FlowDirection="{TemplateBinding FlowDirection}"
FontWeight="{ThemeResource TimePickerHeaderThemeFontWeight}"
Foreground="{ThemeResource TimePickerHeaderForegroundThemeBrush}" />
<StackPanel Grid.Row="1"
Margin="0,0,47,0"
Background="#FFFBFBFB"
Orientation="Horizontal">
<Border x:Name="FirstPickerHost" BorderBrush="#FFFBFBFB">
<ComboBox x:Name="HourPicker"
MinWidth="50"
Background="#FFFBFBFB"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}"
Padding="4,0,0,0" />
</Border>
<Border x:Name="SecondPickerHost" BorderBrush="#FFFBFBFB">
<ComboBox x:Name="MinutePicker"
MinWidth="50"
Background="#FFFBFBFB"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}"
Padding="4,0,0,0" />
</Border>
<Border x:Name="ThirdPickerHost" BorderBrush="#FFFBFBFB">
<ComboBox x:Name="PeriodPicker"
MinWidth="50"
Background="#FFFBFBFB"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}"
Padding="0,0,0,0" />
</Border>
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I would like to use this style, but the formating is messed up, so I'd like to start from a clean copy of the original template
EDIT:
My Visual-Live-Tree

From the Live Visual Tree of Visual Studio, we can find that TimePicker use TimePickerFlyoutPresenter to show it in PopupRoot.
So we can edit its Style and Template to remove the Buttons. To find its Style, we can search TimePickerFlyoutPresenter in generic.xaml.
generic.xaml is available in the (Program Files)\Windows
Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic
folder from a Windows SDK installation.
We can just comment out the Buttons in its template like following:
<Style TargetType="TimePickerFlyoutPresenter">
<Setter Property="Width" Value="242" />
<Setter Property="MinWidth" Value="242" />
<Setter Property="MaxHeight" Value="398" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="AutomationProperties.AutomationId" Value="TimePickerFlyoutPresenter" />
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeHighBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource DateTimeFlyoutBorderThickness}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TimePickerFlyoutPresenter">
<Border x:Name="Background"
MaxHeight="398"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid x:Name="ContentPanel">
<!--<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="45" />
</Grid.RowDefinitions>-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="FirstPickerHostColumn" Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition x:Name="SecondPickerHostColumn" Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition x:Name="ThirdPickerHostColumn" Width="*" />
</Grid.ColumnDefinitions>
<Rectangle x:Name="HighlightRect"
Grid.Column="0"
Grid.ColumnSpan="5"
Height="44"
VerticalAlignment="Center"
Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}" />
<Border x:Name="FirstPickerHost" Grid.Column="0" />
<Rectangle x:Name="FirstPickerSpacing"
Grid.Column="1"
Width="2"
HorizontalAlignment="Center"
Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" />
<Border x:Name="SecondPickerHost" Grid.Column="2" />
<Rectangle x:Name="SecondPickerSpacing"
Grid.Column="3"
Width="2"
HorizontalAlignment="Center"
Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" />
<Border x:Name="ThirdPickerHost" Grid.Column="4" />
</Grid>
<!--<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="2"
Height="2"
VerticalAlignment="Top"
Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" />
<Button x:Name="AcceptButton"
Grid.Column="0"
Margin="0,2,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Content=""
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="16"
Style="{StaticResource DateTimePickerFlyoutButtonStyle}" />
<Button x:Name="DismissButton"
Grid.Column="1"
Margin="0,2,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Content=""
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="16"
Style="{StaticResource DateTimePickerFlyoutButtonStyle}" />
</Grid>-->
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But after this, we can only use Enter to confirm the selected time. And customize this control is not easy as we don't know how this is implemented.
To achieve what you want, I'd like to create a new custom control. Here is a blog about DatePicker calendar custom control for WinRT Xaml. Although this is a DatePicker control, but TimePicker is similar. You can refer to its source code on Codeplex to implement your TimePicker.

ContentDialog Windows 10 Mobile XAML - FullScreen - Padding

I put an ContentDialog in my project to use for Login Popup on Windows 10.
When I run this project on mobile, ContentDialog not shown in full screen and have a minimal padding around this element.On keyboard is visible (on focus element textbox for example) exist margin between keyboard and content dialog
Have any solution to how this on FullScreen? I set the property "FullSizeDesired" true, mas the problem is the same?
Someone help to remove this: - Padding, - Full Screen
My code are:
<ContentDialog
x:Class="ExampleApp.SignInContentDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ExampleApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="SIGN IN">
<Grid x:Name="GridMobile" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button x:Name="MakeOff"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton x:Name="btnRegister"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
</Grid>
The margin/space have in button of page is reserved for the "PrimaryButton" and "SecondaryButton" I think
but I need more buttons and this margin/space is not appropriated for me. I want to remove this.
Thanks.

The reason that you see the gaps in between is not because of any specific Padding values but because in ContentDialog's default style, the height and width are set to Auto which means your content will only be given the size it needs to.
So make the content stretch to fit its parent, you just need to override the default style by applying your own default style of the local:SignInContentDialog and put it inside your App.xaml.
<Style TargetType="local:SignInContentDialog">
<Setter Property="Foreground" Value="{ThemeResource SystemControlPageTextBaseHighBrush}" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="MaxHeight" Value="{ThemeResource ContentDialogMaxHeight}" />
<Setter Property="MinHeight" Value="{ThemeResource ContentDialogMinHeight}" />
<Setter Property="MaxWidth" Value="{ThemeResource ContentDialogMaxWidth}" />
<Setter Property="MinWidth" Value="{ThemeResource ContentDialogMinWidth}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:SignInContentDialog">
<Border x:Name="Container">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- COMMENT OUT THESE FOLLOWING LINES -->
<!--<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>-->
<Border x:Name="BackgroundElement" Background="{TemplateBinding Background}" FlowDirection="{TemplateBinding FlowDirection}" MaxWidth="{TemplateBinding MaxWidth}" MaxHeight="{TemplateBinding MaxHeight}" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}">
<Grid x:Name="DialogSpace" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" ZoomMode="Disabled" Margin="{ThemeResource ContentDialogContentScrollViewerMargin}" IsTabStop="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="Title" Margin="{ThemeResource ContentDialogTitleMargin}" Content="{TemplateBinding Title}" ContentTemplate="{TemplateBinding TitleTemplate}" FontSize="20" FontFamily="Segoe UI" FontWeight="Normal" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Left" VerticalAlignment="Top" IsTabStop="False" MaxHeight="{ThemeResource ContentDialogTitleMaxHeight}">
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Content="{TemplateBinding Content}" MaxLines="2" TextWrapping="Wrap" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" FontSize="{ThemeResource ControlContentThemeFontSize}" FontFamily="{ThemeResource ContentControlThemeFontFamily}" Margin="{ThemeResource ContentDialogContentMargin}" Foreground="{TemplateBinding Foreground}" Grid.Row="1" TextWrapping="Wrap" />
</Grid>
</ScrollViewer>
<Grid x:Name="CommandSpace" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border x:Name="Button1Host" Margin="{ThemeResource ContentDialogButton1HostMargin}" MinWidth="{ThemeResource ContentDialogButtonMinWidth}" MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}" Height="{ThemeResource ContentDialogButtonHeight}" HorizontalAlignment="Stretch" />
<Border x:Name="Button2Host" Margin="{ThemeResource ContentDialogButton2HostMargin}" MinWidth="{ThemeResource ContentDialogButtonMinWidth}" MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}" Height="{ThemeResource ContentDialogButtonHeight}" Grid.Column="1" HorizontalAlignment="Stretch" />
</Grid>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Silverlight - Style ScrollViewer for Listbox

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>