I have a DateTemplate for TilePaneContentTemplate. How can I achieve the stretching of the content to the size of the TileView?
Hi,Could you send me a sample code - how and when you create/apply the template?Regards,Marin
Thank you for reply.
This works fine when templates already exist in UserControl.Resources. I need to build template manually using StringBuilder and XamlReader, because in each different moment I don't know anything about structure of incoming data. And in this case I get what I told you about - image won't stretch correctly.
UPD: Looks like ContentPresenter in my template cannot correctly show vertical alignment. When I set VerticalAlignment to Center, Top or Bottom, it shows everything as intended. But Stretch won't work in this case.
Hi, Yes, probably the post is about TilePane, but I cannot reproduce this issue. I created a small sample based on your TilePane style and I’m using a data template that shows a picture and text. The ItemsSource is bound to a List <MyPicture>.The pictures are created from the Waterfall.jpg Windows Vista sample picture (C:\Users\Public\Pictures\Sample Pictures) but I changed the size of the second image. XAML<igTV:XamWebTileView x:Name="tv2" Grid.Row="1" Loaded="tv2_Loaded" TilePaneContainerStyle="{StaticResource CustomTilePaneStyle}"> <igTV:XamWebTileView.TilePaneContentTemplate> <DataTemplate> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <TextBlock Text="{Binding Text}" HorizontalAlignment="Center"/> <Border Grid.Row="1" BorderBrush="Black" BorderThickness="1" Padding="5" Margin="2"> <Image Source="{Binding Image}" Stretch="Uniform" /> </Border> </Grid> </DataTemplate> </igTV:XamWebTileView.TilePaneContentTemplate></igTV:XamWebTileView>C#private void tv2_Loaded(object sender, RoutedEventArgs e){ List<MyPicture> pictures = new List<MyPicture>(); pictures.Add(new MyPicture("W=1024, H=768", "W1024-768.jpg")); pictures.Add(new MyPicture("W=433, H=767", "W433-767.jpg")); tv2.ItemsSource = pictures;}public class MyPicture{ private string _imagePath; public MyPicture(string text, string imagePath) { _imagePath = imagePath; Text = text; } public string Text { get; set; } public ImageSource Image { get { string path = string.Format("{0}", _imagePath); Uri uri = new Uri(path, UriKind.Relative); BitmapImage bi = new BitmapImage(uri); bi.CreateOptions = BitmapCreateOptions.IgnoreImageCache; return bi; } }}I don’t see anything wrong when I run this sample. Is there anything else?Regards,Marin
Looks like he means TilePane. I have a similar problem. I got a grid with 2 rows. 1st row contains text and 2nd contains a picture. When picture has Landscape orientation, it stretches to tile width and I can see the whole image. In case of Portrait it also stretches to tile width but its bottom goes outside a tile.
I have put Stretch attribute everywhere I can :) but everything still goes wrong. What should I do to keep image within tile borders? BTW, I put custom template to ToggeButton.Content. Below is TilePane's style
<Style x:Key="CustomTilePaneStyle" TargetType="igTileView:TilePane">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="BorderThickness" Value="1,1,1,1"/>
<Setter Property="BorderBrush" Value="{StaticResource BaseBorderBrushKey}"/>
<Setter Property="Background" Value="#FFFFFFFF"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="igTileView:TilePane">
<Grid Margin="0">
<VisualStateManager.VisualStateGroups>
<!-- VisualStateGroups cut -->
</VisualStateManager.VisualStateGroups>
<Border>
<Border.Effect>
<DropShadowEffect BlurRadius="8" Opacity="0.25" ShadowDepth="3"/>
</Border.Effect>
<Infragistics_Silverlight_Controls_Primitives:DropIndicator x:Name="DropIndicator" Visibility="Collapsed"/>
</Border>
<Border x:Name="RootBorder" Cursor="Hand" Background="{StaticResource TilePaneFillKey}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4,4,1,1" VerticalAlignment="Stretch">
<ToggleButton x:Name="MaximizedStateToggleButton" VerticalAlignment="Stretch" IsChecked="false" HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" Padding="0">
<ig:Commanding.Command>
<igTileView:TilePaneCommandSource EventName="Click" Parameter="Toggle" CommandType="Maximize"/>
</ig:Commanding.Command>
<ToggleButton.Content>
<Grid VerticalAlignment="Stretch">
<ContentPresenter x:Name="contentContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Row="0" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Grid>
</ToggleButton.Content>
</ToggleButton>
<Rectangle x:Name="dragBorder" Stroke="{StaticResource TilePaneDragBorderBrushKey}" StrokeThickness="2" RadiusX="1" RadiusY="1" Visibility="Collapsed"/>
<Rectangle x:Name="dropBackground" Fill="{StaticResource TilePaneDropBackgroundBrushKey}" RadiusX="1" RadiusY="1" Visibility="Collapsed"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Hi,Could you refine your question so we can understand what it is that you are trying to do? - stretching of the content to the size of the TileView or to the size of TilePane?Regards,Marin