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