Drag and drop a User Control | Infragistics Forums

345

Drag and drop a User Control

Richa posted over 7 years ago

I need to create a window in my WPF project in c# that contains a usercontrol that can be dragged and dropped

That window can contain any number of that user control depending upon the requirement and the placement of these user controls

should be such that each control are placed vertically below to each other and each user control can be minimized and can be reordered.

I am new to the infragistics and WPF can you please suggest how can this be achieved?

Thanks

Parents

6365

Offline [Infragistics]Tacho posted over 7 years ago

Hello Richa,

Thank you for choosing Infragistics.

In order to move and drag & drop UserControls by using the XamTileManager, you can simply include a UserControl as Content for every XamTile.
In addition, you can set different properties for the NormalModeSettings object and the MaximizedModeSettings object, which will allow you to adjust the way the tiles behave and get displayed.

View:

<ig:XamTileManager Name="tileManager" MaximizedTileLimit="3" TileCloseAction="RemoveItem">
    <ig:XamTileManager.NormalModeSettings>
        <ig:NormalModeSettings TileLayoutOrder="Vertical" />
    </ig:XamTileManager.NormalModeSettings>
    <ig:XamTileManager.MaximizedModeSettings>
        <ig:MaximizedModeSettings MaximizedTileLocation="Top" />
    </ig:XamTileManager.MaximizedModeSettings>
    <!-- ============ Tiles with UserControls ============ -->
    <ig:XamTile Name="tile1" Header="Tile 01" CloseButtonVisibility="Visible" IsMaximized="False">
        <local:UserControl1 />
    </ig:XamTile>
    <ig:XamTile Name="tile2" Header="Tile 02" CloseButtonVisibility="Visible" IsMaximized="False">
        <local:UserControl1 />
    </ig:XamTile>
    <ig:XamTile Name="tile3" Header="Tile 03" CloseButtonVisibility="Visible" IsMaximized="False">
        <local:UserControl1 />
    </ig:XamTile>
</ig:XamTileManager>

I have attached a sample application that demonstrates the approach from above. For more details on the practical applications of the XamTileManager, I can suggest you take a look at the xamTileManager samples from our WPF Samples Browser.

If you have any questions, please let me know.

XamTileManager_layout.zip

Reply

345

Richa posted over 7 years ago in reply to [Infragistics]Tacho

Hi

Thanks for your response.

Can you please confirm if XamTileManager control is supported in Infragistics v16.2?

Also, as per your sample code when I click on maximize button it expands that tile to the left side and remaining all tiles on the right side, but I want that when I click on maximize or rather when I click on header of any minimized tile it should get expand on its current location and all other tiles should get minimized vertically .

Suppose currently Tile 1 is maximized which is at the top and all other tiles are aligned vertically below to Tile 1, now if user clicks on Minimized tile 2 then Tile 1 should get minimized and Tile 2 should get Maximized at the same position(i.e. below Tile1), I don't want that maximized tile should come at the top or left rather it should remain on its same position, and other tiles should be in single row, can this be achieved using XamTileManager? If not, then can you please suggest any other control to achieve this?

Please refer below example:

Maximized Tile1

Minimized Tile2

Minimized Tile3

Minimized Tile4

Thanks
Cancel
Reply

Cancel

Children

6365

Offline [Infragistics]Tacho posted over 7 years ago in reply to Richa
Hello Richa,

Thank you for the behaviour description you have provided.

The XamTileManager is supported in the Infragistics WPF 16.2 product.

In order to set the position for the currently maximized tile relative to the rest of the tiles, you can set the tileManager.MaximizedModeSettings.MaximizedTileLocation property to Top (as shown in the code-snippet and the sample from my previous reply). In this case the rest of the tiles will automatically arrange beneath the maximized tile in a single row. This is the by-design behavior of the control.

XAML:

<ig:XamTileManager.MaximizedModeSettings>
    <ig:MaximizedModeSettings MaximizedTileLocation="Top">
    </ig:MaximizedModeSettings>
</ig:XamTileManager.MaximizedModeSettings>

The ability to arrange the normal tiles beneath the maximized tile in a vertical order (in a single column) has been determined to be a new product idea. You can suggest new product ideas for future versions by emailing ideas@infragistics.com. The behavior of keeping the maximized tile on the same position among the rest of the tiles is related to this product idea and cannot be currently achieved.
Submitting your idea will send it directly to our product management team so that it can be imported into our new ideas community once live: http://ideas.infragistics.com.

In order to maximize a tile which is currently in a normal state whenever its header is clicked, I can suggest you handle the PreviewMouseDown event of the TileHeaderPresenter element by setting the IsMaximized property of the XamTile accordingly.
Please note that since the tiles are dragged by clicking and holding their headers as well, the custom functionality from above will override the drag & drop behavior.

XAML:

private void TileHeaderPresenter_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
    var tile = (sender as TileHeaderPresenter).Tile;

    // If not maximized, maximize it when clicked.
    if (!tile.IsMaximized)
    {
        tile.IsMaximized = true;
        e.Handled = true;
    }
}

In order to keep a single tile below the maximized tile at all times, you can bind the Width property of the XamTiles to the ActualWidth of the XamTileManager itself.

XAML:

<Style TargetType="ig:XamTile">
    <Setter Property="Width" Value="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType=ig:XamTileManager}}" />
</Style>

Currently the XamTileManager is our best control that can work with multiple tiles when it comes to handling drag & drop data by design in such matter and the other controls will not contain an analogical functionality.

I have attached a sample application that demonstrates the approaches from above.
If you have any questions, please let me know.
XamTileManager_layout(Modified).zip
Cancel
Reply

Cancel