2016-05-09 47 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。有沒有辦法做到這一點?

編輯:
它看起來像這樣:

 
(------------------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的寬度始終等於0的圖像加載事件也返回ActualWidth爲0

+0

'Image'將爲'ActualWidth'直到內部圖像是返回0和'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; 
    }