dace
dace

Reputation: 124

Binding to ActualWidth in changing collection

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

Answers (1)

Archana
Archana

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

Related Questions