2016-05-09 4 views
0

У меня есть FlipView контрольная ведьма состоит из изображения и текста об изображении. Я хочу, чтобы текст был такой же ширины, как и изображение. Некоторые изображения имеют разные размеры, чем другие.
Вот мой XAML код:Связывание с ActualWidth в меняющейся коллекции

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

Если я пытаюсь связать текст с изображения в ActualWidth он всегда возвращает 0. Есть ли способ сделать это?

Edit:
Это выглядит следующим образом:

 
(------------------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 

Но я хочу Grid под названием "textGrid", чтобы иметь такую ​​же ширину, как изображение имеет.
Связывание <Grid x:Name="textGrid" Width="{Binding ElementName=image, Path=ActualWidth}"/> приводит к ширине Grid «s всегда равен 0. Image Loaded событие также возвращает ActualWidth в 0.

+0

' Image' возвращает 0 для '' ActualWidth' и ActualHeight', пока внутреннее изображение не будет загружен. После этого возвращается ненулевое значение? – Jai

+0

@Jai Какое событие следует использовать для проверки этого? – dace

+0

Изображение должно быть загружено событие – XAMlMAX

ответ

0
<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; 
    } 
Смежные вопросы