c# uwp cut of usercontrol

Question

I have created a usercontrol that has some controls outside of view, but they will be visible as soon as animation show them. Animation is changing their offset, so they slowly appears. Now, when I put my usercontrol on some view, those controls that I don't want to be seen are visible. I tied to use Grid, GridView, Canvas...but everytime I can see these controls.

I need 4 of my usercontrols in a row, to be resizeble. And this issue makes some usercontrols to overlap eachother.

Here is how I have show them in grid:

<Grid x:Name="gridDown" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="25*" />
            <ColumnDefinition Width="25*" />
            <ColumnDefinition Width="25*" />
            <ColumnDefinition Width="25*" />
        </Grid.ColumnDefinitions>

        <local:MyUserControl x:Name="myControl1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  Grid.Column="0"/>
        <local:MyUserControl x:Name="myControl2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  Grid.Column="1"/>
        <local:MyUserControl x:Name="myControl3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  Grid.Column="2"/>
        <local:MyUserControl x:Name="myControl4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  Grid.Column="3"/>

</Grid>

How to show only central part of my usercontrol? How to hide rest of the controls that I don't want to be seen? What control is the best for this?

How did you achieve your UserControl? Please share a [mcve] with us. — Xie Steven, Jan 24 '17 at 08:12

score 1 · Answer 1 · edited May 23 '17 at 12:01

To control what's displayed you need to tell it where to set the limits of what to show. In WPF has the helpful ClipToBounds property but unfortunately this isn't available in UWP so you need to set the 'Clip' property yourself.

So, if your page looked like this

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
    <local:MyControl/>
    <local:MyControl/>
    <local:MyControl/>
</StackPanel>

And your control XAML looked like this

<Grid Height="50" Width="100">
    <Grid.Clip>
        <RectangleGeometry Rect="0 0 100 50"/>
    </Grid.Clip>
    <Grid.Resources>
        <Storyboard x:Name="ShowRedBit">
            <DoubleAnimation Storyboard.TargetProperty="Rectangle.RenderTransform.(CompositeTransform.TranslateX)" 
                             Storyboard.TargetName="RedBit"
                             Duration="0:0:2"
                     To="0"/>
        </Storyboard>
    </Grid.Resources>
    <Button HorizontalAlignment="Center" Click="Button_Click">show red</Button>
    <Rectangle Fill="Red" Height="50" Width="50" x:Name="RedBit" RenderTransformOrigin="0.5,0.5" >
        <Rectangle.RenderTransform>
            <CompositeTransform TranslateX="-100"/>
        </Rectangle.RenderTransform>
    </Rectangle>
</Grid>

You can see that I've manually set the clip property to be the same as the size of the control.

The answers to this question also show some other approaches, including a way to set it dynamically.

c# uwp cut of usercontrol

1 Answers1