Hide scrollbar in LongListSelector

Question

I'm using a LongListSelector and the scrollbar on the right is adding a bit of empty space which is messing up the design, so I want to hide it. I've tried the following:

ScrollBar sb = ((FrameworkElement)VisualTreeHelper.GetChild(FileList, 0))
                           .FindName("VerticalScrollBar") as ScrollBar;
sb.Width = 0;

But that's not working for wp8, I can make the width larger though but not smaller. It has a ScrollViewer.VerticalScrollBarVisibility property but changing it to Hidden or Disabled doesn't do anything.

/Edit:

This appears to work:

var sb = ((FrameworkElement) VisualTreeHelper.GetChild(FileList, 0))
.FindName("VerticalScrollBar") as ScrollBar;
sb.Margin = new Thickness(-10, 0, 0, 0);

But if anyone has a cleaner method I would still like to hear it.

Answer 1

You can address this by retemplating the whole control.

Add this resource:

<Style x:Key="LongListSelectorWithNoScrollBarStyle" TargetType="phone:LongListSelector">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="phone:LongListSelector">
                <Grid Background="{TemplateBinding Background}" d:DesignWidth="480" d:DesignHeight="800">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ScrollStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="00:00:00.5"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Scrolling" />
                            <VisualState x:Name="NotScrolling"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid Margin="{TemplateBinding Padding}">
                        <ViewportControl x:Name="ViewportControl" HorizontalContentAlignment="Stretch" VerticalAlignment="Top"/>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Use the resource

<phone:LongListSelector Style="{StaticResource LongListSelectorWithNoScrollBarStyle}">
    ....
</phone:LongListSelector>

Voila. No scrollbar.