Reputation: 124
I have a FlipView
control witch consists of image and text about image. I want text to be same width as image. Some of images have different dimensions than others.
Here is my XAML code:
<FlipView x:Name="flipView" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" ItemsSource="{Binding ImagesWithDescriptions}">
<FlipView.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid" Tapped="flipView_Tapped">
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition />
</Grid.RowDefinitions>
<Image x:Name="image" Grid.RowSpan="2" Source="{Binding Image}"></Image>
<Grid x:Name="textGrid" Grid.Row="1">
<Grid.Background>
<SolidColorBrush Color="Black" Opacity="0.5"/>
</Grid.Background>
<TextBlock Foreground="White" HorizontalAlignment="Left" FontSize="20" Text="{Binding Description}"/>
</Grid>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipViewControl>
If I try to bind text to image's ActualWidth
it always returns 0. Is there a way to do that?
Edit:
It looks like this:
(------------------FlipView width----------------------) --------------------------------------------------------F | |This is Image. It's height is | |l | |equals to FlipView's height, | |i | |but width depends on picture's| |p | |ratio, which might differ on | |V | |some pictures. | |i | | | |e | | | |w | | | | | | | |h | | | |e |----------|------------------------------|------------|i |This is |where Grid named "textGrid" is|now (it's |g |width is |the same as FlipView's) | |h --------------------------------------------------------t
But I want Grid
named "textGrid" to have the same width as Image has.
Binding <Grid x:Name="textGrid" Width="{Binding ElementName=image, Path=ActualWidth}"/>
leads to Grid
's width always being equal to 0. Image Loaded event also returns ActualWidth
as 0.
Upvotes: 0
Views: 935
Reputation: 3221
<FlipView x:Name="flipView" ItemsSource="{Binding ListTest}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" >
<FlipView.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid" Background="Blue" >
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.RowSpan="2" x:Name="image">
<Image Stretch="Uniform" SizeChanged="Image_SizeChanged" Source="{Binding Url}" ></Image>
</Grid>
<Grid x:Name="textblockgrid" Grid.Row="1" Background="Gray">
<TextBlock Foreground="White" TextWrapping="Wrap" HorizontalAlignment="Left" FontSize="20" Text="TEXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX trysffffffffffffff sdfffffffffffff dfhdffffffffffffff dfhhhhhhhhX"/>
</Grid>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
private void Image_SizeChanged(object sender, SizeChangedEventArgs e)
{
FlipViewItem item = (FlipViewItem) flipView.ContainerFromItem((sender as Image).DataContext);
var text = FindElementInVisualTree<TextBlock>(item);
(text.Parent as Grid).Width = (sender as Image).ActualWidth;
}
private T FindElementInVisualTree<T>(DependencyObject parentElement) where T : DependencyObject
{
var count = VisualTreeHelper.GetChildrenCount(parentElement);
if (count == 0) return null;
for (int i = 0; i < count; i++)
{
var child = VisualTreeHelper.GetChild(parentElement, i);
if (child != null && child is T)
return (T)child;
else
{
var result = FindElementInVisualTree<T>(child);
if (result != null)
return result;
}
}
return null;
}
Upvotes: 0