C＃用戶控件的UWP切

Question

我創建了一個用戶控件，該控件具有一些不在視圖中的控件，但是一旦動畫顯示它們，它們便將可見。 動畫正在改變其偏移量，因此它們會慢慢出現。 現在，當我將用戶控件放在某個視圖上時，那些不想被看到的控件就可見了。 我不得不使用Grid，GridView，Canvas ...，但是每次看到這些控件時，我都會使用。

我需要連續4個用戶控件來調整大小。 並且此問題使某些用戶控件彼此重疊。

這是我如何在網格中顯示它們：

<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>

如何僅顯示用戶控件的中心部分？ 如何隱藏我不想看到的其余控件？ 什么控制是最好的呢？

Answer 1

要控制顯示的內容，您需要告訴它在哪里設置顯示內容的限制。 在WPF中，它具有有用的ClipToBounds屬性，但不幸的是，它在UWP中不可用，因此您需要自己設置'Clip'屬性。

因此，如果您的頁面看起來像這樣

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

您的控件XAML看起來像這樣

<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>

您可以看到我已將clip屬性手動設置為與控件的大小相同。

對這些問題的答案這個問題也表現出一些其他的方法，包括一種動態設置。