Hello,
I want to create a xamTileManager with Tile items in a different xaml file.
My VM add some properties that I use in the manager :
<ig:XamTileManager Name="xamTilesControl1" Margin="10,0,0,0" MaximizedTileLimit="3" DataContext="{Binding ResultGrid}"> <ig:XamTileManager.NormalModeSettings> <ig:NormalModeSettings TileLayoutOrder="HorizontalVariable" HorizontalTileAreaAlignment="Stretch" VerticalTileAreaAlignment="Stretch" AllowTileDragging="Slide" AllowTileSizing="Individual"> <ig:NormalModeSettings.TileConstraints> <ig:TileConstraints MinWidth="200" MinHeight="200" /> </ig:NormalModeSettings.TileConstraints> </ig:NormalModeSettings> </ig:XamTileManager.NormalModeSettings> <ig:XamTileManager.MaximizedModeSettings> <ig:MaximizedModeSettings AllowTileDragging="No" ShowTileAreaSplitter="False" ShowAllMinimizedTiles="True" MinimizedTileExpansionMode="AllowOne" VerticalTileAreaAlignment="Top" MaximizedTileLayoutOrder="HorizontalWithLastTileFill"> <ig:MaximizedModeSettings.MaximizedTileConstraints> <ig:TileConstraints MaxHeight="300" MaxWidth="450" /> </ig:MaximizedModeSettings.MaximizedTileConstraints> <ig:MaximizedModeSettings.MinimizedTileConstraints> <ig:TileConstraints MinWidth="150" MinHeight="50" /> </ig:MaximizedModeSettings.MinimizedTileConstraints> <ig:MaximizedModeSettings.MinimizedExpandedTileConstraints> <ig:TileConstraints MinWidth="150" MinHeight="100" /> </ig:MaximizedModeSettings.MinimizedExpandedTileConstraints> </ig:MaximizedModeSettings> </ig:XamTileManager.MaximizedModeSettings> <v:ResultGridItemView DataContext="{Binding UpperLeft}" Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibility}, ConverterParameter=Collapsed}" /> <v:ResultGridItemView DataContext="{Binding UpperRight}" Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibility}, ConverterParameter=Collapsed}" /> <v:ResultGridItemView DataContext="{Binding LowerLeft}" Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibility}, ConverterParameter=Collapsed}" /> <v:ResultGridItemView DataContext="{Binding LowerRight}" Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibility}, ConverterParameter=Collapsed}" /> <!--<ig:XamTile Header="IntensityPlot" Content="{Binding ResultGrid.UpperRight}" Visibility="{Binding ResultGrid.UpperRight.IsVisible, Converter={StaticResource BooleanToVisibility}, ConverterParameter=Collapsed}" IsMaximized="True"> <ig:XamTile.ContentTemplate> <DataTemplate> <v:ResultGridItemView/> </DataTemplate> </ig:XamTile.ContentTemplate> </ig:XamTile>--> </ig:XamTileManager>
Here is the style of each item :
<ig:XamTile Header="Title" Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibility}, ConverterParameter=Collapsed}" Content="{Binding Content}" IsMaximized="True"> <ig:XamTile.ContentTemplate> <DataTemplate> <ContentPresenter ContentTemplateSelector="{StaticResource ResultNodeSelector}" Margin = "4,0,4,4"/> </DataTemplate> </ig:XamTile.ContentTemplate> </ig:XamTile>
I attached the style of my manager and the picture of the result.
Could you help me and prevent this inception ?
Regards
Hi teamtim,
The XamTileManager is going to wrap each of your ResultGridItemView elements inside its own XamTile element. So I want to say that your screenshot is expected. I don't really know what the issue is in the screenshot though so I can't really say for sure. What is the behavior that you are expecting?
I want one XamTile by element and not a XamTile inside.
I mean that each element will be with the same style, here, the title is only visible inside the tile.
A set the context of the resultItem, so the tile will get this and set the title and datas to the right place.
The tile have the expand button, that I force in the style but not inside.
So what is the solution to put the title and the content to the right area ?
The aim of creating a different file for itemResultView is too prevent copy/paste of each path and settings.
I think I find why there is this inception. By default, your control apply XamTileStyle when an item is added like this :
<Grid Grid.Column="2"> <ig:XamTileManager Name="xamTilesControl1" Margin="10,0,0,0" MaximizedTileLimit="3" DataContext="{Binding ResultGrid}">
<ig:XamTileManager.NormalModeSettings> </ig:XamTileManager.NormalModeSettings>
<ig:XamTileManager.MaximizedModeSettings> </ig:XamTileManager.MaximizedModeSettings>
<v:ResultGridItemView DataContext="{Binding UpperLeft}" Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibility}, ConverterParameter=Collapsed}" /> <v:ResultGridItemView DataContext="{Binding UpperRight}" Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibility}, ConverterParameter=Collapsed}" /> <v:ResultGridItemView DataContext="{Binding LowerLeft}" Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibility}, ConverterParameter=Collapsed}" /> <v:ResultGridItemView DataContext="{Binding LowerRight}" Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibility}, ConverterParameter=Collapsed}" /></ig:XamTileManager>
I want to prevent this, by removing the style when I added items manually and let me configure the style for all elements.
And inceptions will not be here.
The other solution, is to access to parent datacontext or\and parent tile and edit content with the right designViewModel.
Does this mean you were able to get it working the way you wanted now? If so I recommend marking your post as the answer.
I think that remove style to the principal scrollviewer will help hard coded elements to be correctly display.
I maybe have an idea.
The XamlTileManager.ItemTemplate isn't the right level to apply a custom dataTemplate from an other xaml file with XamTile in it.
Maybe the XamTilePanel need to changed to accept the re-definition of a full XamTile style from an other xaml.
Could you confirm my ideas and help me ?
Let us clarify a few things first because I think I'm even more confused now than I was before.
- You have this element called ResultGridItemView- Inside ResultGridItemView you have declared a XamTile instance because you don't want to have to copy+paste XamTile settings for each XamTile you want to display.
Is this correct?
If this is correct then I think I know how you can solve your issue. The issue is that your ResultGridItemView is a control that the XamTileManager doesn't understand, and inside that control is your XamTile. The XamTileManager doesn't care that there is a XamTile inside ResultGridItemView, it only cares about what ResultGridItemView is. Since ResultGridItemView itself is not a XamTile, the manager wraps your ResultGridItemView inside it's own XamTile that it created. So now in the visual tree you'll see this:
XamTileManager -> XamTile -> ResultGridItemView -> XamTile
Don't do this. Instead, make ResultGridItemView derive from XamTile so that the XamTileManager can see that it is a XamTile. When you do this you have to make sure that you update the ResultGridItemView XAML also.
public partial class ResultGridItemView : XamTile{ public ResultGridItemView() { InitializeComponent(); }}
<ig:XamTile x:Class="TileManager.ResultGridItemView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ig="http://schemas.infragistics.com/xaml"> ...</ig:XamTile>
Now when you add the ResultGridItemView to the XamTileManager the manager will see that ResultGridItemView is a XamTile and it will use your XAML to render the tile.
Sorry for misunderstanding, I'll try to add details.
I have a XamTileManager, itemsSource is a list of ResultGridItemView with viewModel and DesignViewModel.
ResultGridItemView have a xaml which use a contentSelector to display a ContentPresenter.
This is what I understand about your control, ItemsTemplate represent the UI style of the element. The DataTemplate or Content is only use to define what is display inside.
My need is to have file, that combine both so I can use properties like Title that is in the ResultGridItemView.
It's one place, where I can define the content of XamTile and import/apply style from a ressource file.
Because I can't setup the XamTile.Title from a child element of ResultGridItemView type, so actually my title is empty but well set in my ViewModel.
Actual files :
XamTileManager which hosts a DataTemplate, DataTemplate host and can only display ContentPresenter, Style as a ressource
Futur files :
XamTileManager which hosts a Fulltemplate, FullTemplate is a UserControl that declare a XamTile with content AND title settings, Style a ressource
So no more dataTemplate, FullTemplate represent a full XamTile with content and Title included. Because my title is dynamic, and actually the title is only define in the style and set by default.
I hope it's will help you, and I can give more details if needed.
I updated your sample to make the binding work as expected. The issue is that HeaderPath is only designed to look for properties off the ItemsSource. Since the ItemsSource is set to a collection of ResultGridItem, HeaderPath is only going to check properties inside ResultGridItem and ResultGridItem doesn't have a Title property. If you want to setup your header in the same way as you did the content with your DockElement, provide an ItemHeaderTemplate and inside there have a UserControl that displays the header for GridItem.
I had to modify your TileHeaderPresenter style in order for the ContentPresenter inside to find the template (I added "{TemplateBinding ContentTemplate}" to the ContentPresenter). I also had to remove the x:Key because the style wasn't being used in the XamTileManager. Unfortunately I don't see a TileHeaderStyle property where you can set the style using the x:Key so removing the key is the only way to apply the style.
Take a look at the updated sample.
While I was studying, a coworker change the code to add a new feature, so my code and details aren't up to date.
I attach the new version.
As you can see the ItemsSource is a list of ResultGridItem, this list have 4 items that have 4 subItems and only there is only 1 subItem display by ResultGridItem.
All content are stored in Item1 to Item4 with a IsVisible property for each subItem.
Sometime Item1 is visible but not others, so there is only one XamTile display with a specific subItem.
As you can test the attach project, the title isn't here.
I modify the style of XamTileHeader and add a custom button for OpenExternal. I'll set it on my software but keep it null for test.
How I can link the command to the style like for the Title property/path ?
That isn't going to work. The ItemTemplate property is designed to be used in order to define the content for a XamTile. You should not place a XamTile inside of the ItemTemplate.
When you bind the XamTileManager.ItemsSource to your list of ResultGridItemView, the manager is going to create a single XamTile per ResultGridItemView instance in the list. If you have an ItemTemplate defined it will then place that content inside the XamTile itself and the DataContext will be the ResultGridItemView. If you do not specify an ItemTemplate then the manager will set the XamTile.Content directly to the ResultGridItemView. So there is no reason to include a XamTile inside of your ResultGridItemView.
If you want to bind the XamTile header to the Title property in your ResultGridItemView, set the HeaderPath property on the XamTileManager. Either that or set the ItemHeaderTemplate to a DataTemplate.
<ig:XamTileManager ItemsSource="{Binding ResultItems}" HeaderPath="Title" ...
OR
<ig:XamTileManager.ItemHeaderTemplate> <DataTemplate> <TextBlock Text="{Binding Title}"/> </DataTemplate></ig:XamTileManager.ItemHeaderTemplate>
That should take care of a majority of your requirements. The last part is the style resources. These can just be implicit styles that you include inside the XamTileManager.Resources. Or you can set the ItemContainerStyle property to a XamTile style and set it up how you wish.
<ig:XamTileManager.ItemContainerStyle> <Style TargetType="{x:Type ig:XamTile}"> ... </Style></ig:XamTileManager.ItemContainerStyle>
I attached a sample that shows a very simple view of how this is supposed to work.