I am interested to give a gradient background color in the TilePane Header section.
Can someone give me a brief sample on how to implement it? I am using TilePaneContainerStyle property but I have no luck. Greatly appreciated for any feedbacks! Thanks.
Hello,
In order to do this you will have to focus on the TilePaneFillKey brush which is the default brush for the header and can be located in DefaultStyle\XamWebTileView.xaml
<!--TilePane Background--><LinearGradientBrush x:Key="TilePaneFillKey" StartPoint="0.5,0" EndPoint="0.5,1"> <LinearGradientBrush.GradientStops> <GradientStopCollection> <GradientStop Offset="0" Color="Red"/> <GradientStop Offset="1" Color="White"/> </GradientStopCollection> </LinearGradientBrush.GradientStops></LinearGradientBrush>
You can create a style for the TilePane as a resource and then set it for all the panes using the code below:
<ig:XamWebTileView.DefaultItemsContainer> <DataTemplate> <ig:TilePane Style="{StaticResource TilePaneCustomStyle1}" /> </DataTemplate> </ig:XamWebTileView.DefaultItemsContainer>
or set it to particular TilePane:
<igTileView:TilePane Style="{StaticResource TilePaneCustomStyle1}"/>
Let me know if you have any questions with this matter.
Vlad
Vlad,
I'm a bit confused about how to change the TilePaneFillKey into a style that I can apply to the TilePane. Can you please post an example of what the style should look like.
Or at least if you can let me know what property the gradient should be applied to for the header background.
Thanks & RegardsCornelius Kruger
Cornelius,
I'm attaching a sample project so you can take a look and let me know if you have any questions. The style that I'm using is located in Dictionary1.xaml and it is named "TilePaneCustomStyle1". In the template you can see that the grid used for the background color of the pane is setting custom brush for the Background property - TilePaneFillKey. It's declaration is located in the same dictionary. With this approach you can either set this custom style for particular pane or for all of the panes. Alternatively you can create custom HeaderTemplate for the panes and set the background for one of the elements in the template.
-Vlad
Thanks for that, it works perfectly.
RegardsCornelius.