User avatar
Matso
Topic Author
Posts: 13
Joined: 19 Jul 2018, 11:52

Clipping elements within a control

22 Aug 2018, 10:17

Hi,
I have a ScrollViewer with a UniformGrid inside that contains some Buttons. The grid has a fixed number of columns but the number of rows can change, depending on the number of buttons. The size of the scroll view and the grid is set to be that only three rows should be visible. The thing is that when I scroll up or down some buttons should be only partially visible (clipped to the bounds of the scroll view/grid), but they are not. They disapear only when I scroll far enough for them to stick out of the bounds of the grid completely. How can I achieve a proper clipping in this case? There is this 'Clip' property in the grid but I don't know how to use it here. Should I make a Rectangle and use it as a clipping geometry somehow?

MK
 
User avatar
sfernandez
Site Admin
Posts: 2984
Joined: 22 Dec 2011, 19:20

Re: Clipping elements within a control

22 Aug 2018, 20:03

Hi,

If the ScrollViewer has a fixed height it should work. I tested the following xaml in XamlPlayer and it works as expected:
<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer Width="200" Height="60">
        <UniformGrid Columns="3">
            <Button Content="1"/>
            <Button Content="2"/>
            <Button Content="3"/>
            <Button Content="4"/>
            <Button Content="5"/>
            <Button Content="6"/>
            <Button Content="7"/>
            <Button Content="8"/>
            <Button Content="9"/>
            <Button Content="10"/>
            <Button Content="11"/>
            <Button Content="12"/>
            <Button Content="13"/>
            <Button Content="14"/>
            <Button Content="15"/>
            <Button Content="16"/>
            <Button Content="17"/>
            <Button Content="18"/>
            <Button Content="19"/>
            <Button Content="20"/>
            <Button Content="21"/>
        </UniformGrid>
    </ScrollViewer>
</Grid>
UniformGrid.png
UniformGrid.png (4.32 KiB) Viewed 650 times
As you can see in the right image we enabled the clipping for the ScrollViewer (blueish rectangle).

Which engine are you using NoesisGUI with?
 
User avatar
Matso
Topic Author
Posts: 13
Joined: 19 Jul 2018, 11:52

Re: Clipping elements within a control

23 Aug 2018, 08:16

We are using our own engine, and I think this seems to be the case, though I have to investigate it more. The example You provided works perfectly in Blend, but in the engine it is exactly as I described it above.
 
User avatar
sfernandez
Site Admin
Posts: 2984
Joined: 22 Dec 2011, 19:20

Re: Clipping elements within a control

23 Aug 2018, 14:18

As explained in our C++ integration tutorial (see last note in the Render section), to clip geometries we use the stencil buffer, so you need to have one active and cleared each frame before starting rendering UI to the screen.

Who is online

Users browsing this forum: Bing [Bot] and 96 guests