Horizontal Scroll Bar When Fit To Width

Jan 21, 2011 at 8:44 AM

Hi,

I've been fighting with an issue in this, otherwise, great product. There seem to be a bug whenever you set the view mode to fit-to-width, causing the horizontal scroll-bar to appear when it clearly shouldn't. It stays that way until you make the window wider and only reappears when loading a new document (or the same one again). Just to make sure it wasn't some variable in my project, I downloaded one of the samples on this site and found that the issue was still there (the annotation tutorial). It's just a cosmetic problem but I hope you can help, as it does stand out in the UI.

 

Thanks

Morten

Coordinator
Jan 21, 2011 at 9:43 AM
Edited Jan 21, 2011 at 9:44 AM

Hi Morten,

Correct, that's a bug in the DocumentViewer where the view port of the scrollviewer is calculated incorrectly.

An internal update of Document Toolkit is available with a fix for this bug at http://firstfloorsoftware.com/downloads/documenttoolkit/FirstFloor.Documents%20(internal).zip.

Eventually the fix will end up in an official document toolkit release.

Hope this helps,

- Koen

Jan 21, 2011 at 10:48 AM

Hmm, that didn't work. I replaced the dll's but the problem did not go away.

Coordinator
Jan 21, 2011 at 11:04 AM

Interesting. Take a look at the online sample browser, I've updated that one as well.

The following steps demonstrates the fixed behavior

  1. Browse to http://firstfloorsoftware.com/liveapps/DocumentToolkit2/#/SampleSimpleViewer
  2. Set view mode to a fixed size so that a horizontal scrollbar appear (for example set to 200%)
  3. Then set view mode to fit width. The horizontal scrollbar now dissappears. In previous build the horizontal scrollbar was still visible.

Do you have alternative steps that still shows the horizontal scrollbar when it shouldn't?

Possibly your app is loading from a browser cache? Please check whether the updated assemblies are actually used.

- Koen

Jan 21, 2011 at 11:35 AM

It only happens when I set the default view mode like this:

ViewModePicker.SelectedViewMode = ViewModePicker.ViewModes.First(vm => vm.ScaleMode == ScaleMode.FitWidth);
Coordinator
Jan 21, 2011 at 2:31 PM
Edited Jan 21, 2011 at 8:45 PM

When do you execute this code? And what's the previous viewmode?

Jan 22, 2011 at 4:31 PM

I do it once, in the constructor of the view, right after InitializeComponent. The previous view mode is fit-to-page (just the default). 

Coordinator
Jan 24, 2011 at 1:47 PM

Hi Morten,

Ah, I see. The problem is that the scrollviewer has its vertical and horizontal scrollbar visibility set to auto. Initially both scrollbars are not visible when the viewport (the visible content area of the scrollviewer) is calculated. In your case the calculated viewport width is too large because it includes the space that is required to render the vertical scrollbar. 

What you should do is provide a custom DocumentViewer template where you specify that the VerticalScrollBar should always be visible. When you use below template in combination with the internal release I referred to earlier, the fit-width should work.

<ControlTemplate TargetType="doc:DocumentViewer">
    <Border Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}">
        <ScrollViewer x:Name="ScrollViewer" 
                      Background="Transparent" 
                      BorderThickness="0" 
                      HorizontalScrollBarVisibility="Auto" 
                      VerticalScrollBarVisibility="Visible">
            <ItemsControl x:Name="Pages">
                <i:Interaction.Behaviors>
                    <doc:PageVirtualizer />
                </i:Interaction.Behaviors>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid Width="{Binding DesiredPageContainerSize.Width}"
                              Height="{Binding DesiredPageContainerSize.Height}">
                            <Border Background="White" 
                                    BorderBrush="Black" 
                                    BorderThickness="1"
                                    Margin="4" 
                                    HorizontalAlignment="Center" 
                                    VerticalAlignment="Center">
                                <doc:FixedPageViewer FixedPage="{Binding FixedPage}" 
                                                     FixedPageSize="{Binding FixedPageSize}"
                                                     FixedPageError="{Binding FixedPageError}"
                                                     Scale="{Binding DesiredPageScale}">
                                    <i:Interaction.Behaviors>
                                        <doc:FixedPageAdorner Annotations="{Binding TextContainer.Annotations}"
                                                              Selection="{Binding TextContainer.Selection}" />
                                        <doc:NavigationBehavior TextContainer="{Binding TextContainer}" />
                                    </i:Interaction.Behaviors>
                                </doc:FixedPageViewer>
                            </Border>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Border>
</ControlTemplate>

Hope this helps.

- Koen

Jan 25, 2011 at 6:34 AM

Thank you very much, that works!

I did have to hide the viewer until a document is shown, because of the permanent vertical scroll bar, but it is an acceptable solution.