CODEWITHSUNDEEP
c#uwpgriduwp-xamltextblock
KiranMaharana1224
KiranMaharana1224

Reputation: 11

How to set boundary of a TextBlock in a grid?

I have few textblocks in a grid which can be dragged. I want to restrict the user so that user can't drag a textblock outside the grid.

I've tried a few ways like getting the position of the grid so that somehow i can control but it didn't work as expected. Thanks in advance.

Upvotes: 0

Views: 180

Answers (1)

Adam McMahon
Adam McMahon

Reputation: 800

This can be done pretty easily using a Canvas inside the Grid, calculating the coordinates of the TextBlock inside of the Canvas and then continuously checking whether the TextBlock is still within its bounds. When the TextBlock leaves its bounds, the Transform then reverts back to it's last known 'good' coordinates.

XAML

<Grid>
    <Grid Name="GridBounds" Width="600" Height="600" Background="Aqua">
        <Canvas>
            <TextBlock Name="TextBlock1" Text="Drag Me" FontSize="40" ManipulationDelta="TextBlock1_ManipulationDelta" ManipulationMode="TranslateX, TranslateY" HorizontalAlignment="Stretch" Canvas.Left="216" Canvas.Top="234" VerticalAlignment="Stretch"/>
        </Canvas>
    </Grid>
</Grid>

Code Behind

    CompositeTransform TextDrag = new CompositeTransform();
    CompositeTransform savedTransform = new CompositeTransform();

    public MainPage()
    {          
        this.InitializeComponent();
        TextBlock1.RenderTransform = TextDrag;
    }

    // Copy Transform X and Y if TextBlock is within bounds
    private void CopyTransform(CompositeTransform orig, CompositeTransform copy)
    {
        copy.TranslateX = orig.TranslateX;
        copy.TranslateY = orig.TranslateY;
    }


    private void TextBlock1_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        TextDrag.TranslateX += e.Delta.Translation.X;
        TextDrag.TranslateY += e.Delta.Translation.Y;           

        CompositeTransform transform = TextBlock1.RenderTransform as CompositeTransform;

        // Get current Top-Left coordinates of TextBlock
        var TextTopLeft = TextBlock1.TransformToVisual(GridBounds).TransformPoint(new Point(0, 0));

        // Get current Bottom-Right coordinates of TextBlock
        var TextBottomRight = TextBlock1.TransformToVisual(GridBounds).TransformPoint(new Point(TextBlock1.ActualWidth, TextBlock1.ActualHeight));

        // Get Top-Left grid coordinates
        var GridTopLeft = (new Point(0, 0));

        // Get Bottom-Right grid coordinates
        var GridBottomRight = (new Point(GridBounds.ActualWidth, GridBounds.ActualHeight));

        if (TextTopLeft.X < GridTopLeft.X || TextBottomRight.X > GridBottomRight.X)
        {
            // Out of bounds on X axis - Revert to copied X transform
            TextDrag.TranslateX = savedTransform.TranslateX; ;
        }

        else if (TextTopLeft.Y < GridTopLeft.Y || TextBottomRight.Y > GridBottomRight.Y)
        {
            // Out of bounds on Y axis - Revert to copied Y transform
            TextDrag.TranslateY = savedTransform.TranslateY;
        }

        else
        {
            // TextBlock is within bounds - Copy X and Y Transform
            CopyTransform(transform, savedTransform);
        }
    }

Here it is in action. Here it is in action

Upvotes: 1

Related Questions