ScrollView ClipToBounds

MoritzH · July 11, 2016, 11:21am

Hey,

I’m using the TabBarNavigation example. My ScrollView exceeds the Navigation, I don’t have a clue right now.

<App Background="#333">
    <JavaScript>
        var Observable = require("FuseJS/Observable");

        var data = Observable();

        fetch('https://fuseweb.azureedge.net/forum-user-uploads/2016/08/22/bMfk1x4dbIfR-legacy-files-ZjPdBhWNdPRMI4qK-colors.json&#39;)
            .then(function(response) { return response.json(); })
            .then(function(responseObject) { 
                data.value = responseObject;
        console.log(JSON.stringify(data.value));

            })
        ;


        module.exports = {
            data: data
        };
    </JavaScript>
    <DockPanel>
        <Fuse.iOS.StatusBarConfig Style="Light" />
        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />
        <PageControl ux:Name="pages">
            <Page ux:Name="page1" Background="#34495e" ClipToBounds="true">
                <StackPanel>
                <Grid Rows="150,auto,50">
                <Panel Row="0">
                    <Image File="Assets/fuse-logo.png"></Image>
                </Panel>
                <Panel Row="1">
                    <ScrollView ClipToBounds="true">
                        <Grid ColumnCount="2">
                            <Each Items="{data.colorsArray}">
                                <DockPanel Height="120" Margin="10,0">
                                    <Panel DockPanel.Dock="Top" Margin="10" Height="30">
                                        <Rectangle Layer="Background" CornerRadius="10" Fill="#fff" />
                                        <Text Value="{colorName}" TextAlignment="Center" Alignment="Center" />
                                    </Panel>

                                    <Rectangle Layer="Background" CornerRadius="10" Fill="{hexValue}" Margin="10, 10, 10, 0" />
                                </DockPanel>
                            </Each>
                        </Grid>
                    </ScrollView>
                </Panel>
                <Panel Row="2"></Panel>
                </Grid>
            </StackPanel>
                <ActivatingAnimation>
                    <Scale Target="tabBarImage1" Factor="1.5" />
                </ActivatingAnimation>
            </Page>
            <Page ux:Name="page2" Background="#3498db">
                <Image File="Assets/fuse-logo.png" StretchDirection="DownOnly" />
                <ActivatingAnimation>
                    <Scale Target="tabBarImage2" Factor="1.5" />
                </ActivatingAnimation>
            </Page>
            <Page ux:Name="page3" Background="#aa3377">
                <Image File="Assets/fuse-logo.png" StretchDirection="DownOnly" />
                <ActivatingAnimation>
                    <Scale Target="tabBarImage3" Factor="1.5" />
                </ActivatingAnimation>
            </Page>
            <Page ux:Name="page4" Background="#88cc22">
                <Image File="Assets/fuse-logo.png" StretchDirection="DownOnly" />
                <ActivatingAnimation>
                    <Scale Target="tabBarImage4" Factor="1.5" />
                </ActivatingAnimation>
            </Page>
        </PageControl>

        <Grid Columns="1,1,1,1" Height="45" Dock="Bottom">
            <Image ux:Class="Icon" Margin="10" />
            <Panel Background="#34495e">
                <Icon ux:Name="tabBarImage1" File="Assets/icon-hexagon.png" />
                <Clicked>
                    <Set pages.Active="page1" />
                </Clicked>
            </Panel>
            <Panel Background="#3498db">
                <Icon ux:Name="tabBarImage2" File="Assets/icon-star.png" />
                <Clicked>
                    <Set pages.Active="page2" />
                </Clicked>
            </Panel>
            <Panel Background="#aa3377">
                <Icon ux:Name="tabBarImage3" File="Assets/icon-square.png" />
                <Clicked>
                    <Set pages.Active="page3" />
                </Clicked>
            </Panel>
            <Panel Background="#88cc22">
                <Icon ux:Name="tabBarImage4" File="Assets/icon-triangle.png" />
                <Clicked>
                    <Set pages.Active="page4" />
                </Clicked>
            </Panel>
        </Grid>
    </DockPanel>
</App>

Kristian_Hasselknipp · July 12, 2016, 7:40am

Hi!

Instead of Rows=“150,auto,50” use Rows=“150,1*,50” instead, and then you shouldn’t need the last 50 which i assume you use to compensate for the bottom bar:

Rows="150,1*"

Then you can also remove the empty Panel you placed at Row=“2”.

“150,1*” means that the first row is 150 points tall, and the second row fills the rest of the available space. Using “auto” in this case means that the grid asks the item for how much space it needs, which the ScrollView doesn’t know (it has no implicit height).

Here is the full code:

<App Background="#333">
    <JavaScript>
    var Observable = require("FuseJS/Observable");

    var data = Observable();

    fetch('https://fuseweb.azureedge.net/forum-user-uploads/2016/08/22/0EuNnSw3wTci-legacy-files-ZjPdBhWNdPRMI4qK-colors.json')
        .then(function(response) { return response.json(); })
        .then(function(responseObject) {
            data.value = responseObject;
            console.log(JSON.stringify(data.value));
           });


    module.exports = {
        data: data
    };
</JavaScript>
<DockPanel>
    <Fuse.iOS.StatusBarConfig Style="Light" />
    <StatusBarBackground Dock="Top" />
    <BottomBarBackground Dock="Bottom" />
    <PageControl ux:Name="pages">
        <Page ux:Name="page1" Background="#34495e" ClipToBounds="true">
            <Grid Rows="150,1*">
                <Panel Row="0">
                    <Image File="Assets/fuse-logo.png"></Image>
                </Panel>
                <Panel Row="1">
                    <ScrollView ClipToBounds="true">
                        <Grid ColumnCount="2">
                            <Each Items="{data.colorsArray}">
                                <DockPanel Height="120" Margin="10,0">
                                    <Panel DockPanel.Dock="Top" Margin="10" Height="30">
                                        <Rectangle Layer="Background" CornerRadius="10" Fill="#fff" />
                                        <Text Value="{colorName}" TextAlignment="Center" Alignment="Center" />
                                    </Panel>

                                    <Rectangle Layer="Background" CornerRadius="10" Fill="{hexValue}" Margin="10, 10, 10, 0" />
                                </DockPanel>
                            </Each>
                        </Grid>
                    </ScrollView>
                </Panel>
            </Grid>
            <ActivatingAnimation>
                <Scale Target="tabBarImage1" Factor="1.5" />
            </ActivatingAnimation>
        </Page>
        <Page ux:Name="page2" Background="#3498db">
            <Image File="Assets/fuse-logo.png" StretchDirection="DownOnly" />
            <ActivatingAnimation>
                <Scale Target="tabBarImage2" Factor="1.5" />
            </ActivatingAnimation>
        </Page>
        <Page ux:Name="page3" Background="#aa3377">
            <Image File="Assets/fuse-logo.png" StretchDirection="DownOnly" />
            <ActivatingAnimation>
                <Scale Target="tabBarImage3" Factor="1.5" />
            </ActivatingAnimation>
        </Page>
        <Page ux:Name="page4" Background="#88cc22">
            <Image File="Assets/fuse-logo.png" StretchDirection="DownOnly" />
            <ActivatingAnimation>
                <Scale Target="tabBarImage4" Factor="1.5" />
            </ActivatingAnimation>
        </Page>
    </PageControl>

    <Grid Columns="1*,1*,1*,1*" Height="45" Dock="Bottom">
        <Image ux:Class="Icon" Margin="10" />
        <Panel Background="#34495e">
            <Icon ux:Name="tabBarImage1" File="Assets/icon-hexagon.png" />
            <Clicked>
                <Set pages.Active="page1" />
            </Clicked>
        </Panel>
        <Panel Background="#3498db">
            <Icon ux:Name="tabBarImage2" File="Assets/icon-star.png" />
            <Clicked>
                <Set pages.Active="page2" />
            </Clicked>
        </Panel>
        <Panel Background="#aa3377">
            <Icon ux:Name="tabBarImage3" File="Assets/icon-square.png" />
            <Clicked>
                <Set pages.Active="page3" />
            </Clicked>
        </Panel>
        <Panel Background="#88cc22">
            <Icon ux:Name="tabBarImage4" File="Assets/icon-triangle.png" />
            <Clicked>
                <Set pages.Active="page4" />
            </Clicked>
        </Panel>
    </Grid>
</DockPanel>
</App>

MoritzH · July 12, 2016, 9:22am

Hey,

thanks for your help! But the contents of the scrollview still exceeds the bottom navigation, I can’t see the content fully.

Kristian_Hasselknipp · July 12, 2016, 9:36am

What content can’t you see? Could you share a screenshot?

MoritzH · July 12, 2016, 9:41am

http://g.recordit.co/I7WJHdMJbW.gif

and in design mode

http://i.imgur.com/skMsbuX.png

Kristian_Hasselknipp · July 12, 2016, 10:16am

But the content is bigger than the available area. This is the whole purpose of a ScrollView. If you want that ScrollView in particular to cover the whole screen (including the tab bar), you need to do some more restructuring.

Could you describe the result you want in more detail?

MoritzH · July 12, 2016, 10:26am

The ScrollView height should be the available screen size without the tab bar, I cant get the content visible, because the ScrollView’s height is too high.

Imagine the screen has a height of 500pt: My header is 150, the tabbar 50, the ScrollView should use the remaining 300pts.

It seems, 1* sets the ScrollView height to as much as it needs to show all content, when I set it to a fixed height it works as desired.

Edit: StackPanel seems to cause the bug, removed it and it works fine!

Kristian_Hasselknipp · July 12, 2016, 10:37am

Right.

Did you try the code i posted in my first answer? It did exactly that.

Fernando_Lins · August 19, 2016, 11:07pm

Kristian, wouldn’t this be the case of setting the ScrollView inside a DockPanel and setting its Dock property to Fill?

<DockPanel>
    <Panel ux:Name="TopBar" Dock="Top"/>
    <ScrollView Dock="Fill" /> <!-- Will take available space between top and bottom -->
    <Panel ux:Name="BottomBar" Dock="Bottom" />
</DockPanel>

Topic		Replies	Views
ClipToBounds please help How-to Discussions	1	399	July 10, 2020
ScrollTo end Observables General	1	681	August 11, 2016
ScrollView animate scroll to "Top" How-to Discussions	2	1297	December 12, 2016
2 ScrollViews with equal heights How-to Discussions	1	518	April 28, 2016
ScrollView scroll to "Top" or "Front" to make selections visible Bug Reports	2	837	December 12, 2016

ScrollView ClipToBounds

Related topics