locked
How to change the property of a child UI element defined in GridView.ItemTemplate programmatically?

    Question

  • I have a GridView.ItemTemplate definition like this:

                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Border Background="White" Padding="3,3,3,3">
                                <Grid>
                                    <Image Source="{Binding ThumbNail}" Height="200" Width="200" Stretch="UniformToFill"/>
                                ......
                                ......                        
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </GridView.ItemTemplate>
    

    I would like to change the Image element's width and height in C# based on the current page size.  How can I access that in C#?

    Thanks a lot!

    Wednesday, April 30, 2014 8:32 PM

Answers

  • Hi,

    You can use VisualTreeHelper to access control in DataTemplate, some codes below you can refer to:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Button Content="Button" Click="Button_Click" Grid.Row="0"/>
            <GridView x:Name="gridview" Grid.Row="1" ItemsSource="{Binding}">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Border Background="White" Padding="3,3,3,3">
                            <Grid>
                                <Image Source="{Binding ThumbNail}" Height="200" Width="200" Stretch="UniformToFill" x:Name="image"/>
                              
                            </Grid>
                        </Border>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>
        </Grid>
    public MainPage()
            {
                this.InitializeComponent();
                List<Test> test = new List<Test>();
                test.Add(new Test { ThumbNail = "Assets/Logo.scale-100.png" });
                test.Add(new Test { ThumbNail = "Assets/Logo.scale-100.png" });
    
                gridview.DataContext = test;
               
            }
            public List<UIElement> AllChildren(DependencyObject parent)
            {
                var _List = new List<UIElement>();
                for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
                {
                    var _Child = VisualTreeHelper.GetChild(parent, i);
                    if (_Child is UIElement)
                        _List.Add(_Child as UIElement);
                    _List.AddRange(AllChildren(_Child));
                }
                return _List;
               
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                foreach (var item in gridview.Items)
                {
                 
                    var _Container = gridview.ContainerFromItem(item);
                    var _Children = AllChildren(_Container);
    
                    var image = _Children
                        // only interested in TextBoxes
                        .OfType<Image>()
                        // only interested in FirstName
                        .First(x => x.Name.Equals("image"));
                    image.Width = 900;
    
                }
            }
    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Proposed as answer by Dave SmitsMVP Thursday, May 1, 2014 7:34 AM
    • Marked as answer by LChen_MSDN Friday, May 2, 2014 11:24 PM
    Thursday, May 1, 2014 5:45 AM
  • A few easier ways. Which to choose depends on exactly what you want:

    Databind the size, pick from a few options with VisualStates, set in PrepareContainerForItemOverride, set in an event on the control.

    When in doubt: Data bind 😃

    Friday, May 2, 2014 11:21 PM
    Owner

All replies

  • Hi,

    You can use VisualTreeHelper to access control in DataTemplate, some codes below you can refer to:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Button Content="Button" Click="Button_Click" Grid.Row="0"/>
            <GridView x:Name="gridview" Grid.Row="1" ItemsSource="{Binding}">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Border Background="White" Padding="3,3,3,3">
                            <Grid>
                                <Image Source="{Binding ThumbNail}" Height="200" Width="200" Stretch="UniformToFill" x:Name="image"/>
                              
                            </Grid>
                        </Border>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>
        </Grid>
    public MainPage()
            {
                this.InitializeComponent();
                List<Test> test = new List<Test>();
                test.Add(new Test { ThumbNail = "Assets/Logo.scale-100.png" });
                test.Add(new Test { ThumbNail = "Assets/Logo.scale-100.png" });
    
                gridview.DataContext = test;
               
            }
            public List<UIElement> AllChildren(DependencyObject parent)
            {
                var _List = new List<UIElement>();
                for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
                {
                    var _Child = VisualTreeHelper.GetChild(parent, i);
                    if (_Child is UIElement)
                        _List.Add(_Child as UIElement);
                    _List.AddRange(AllChildren(_Child));
                }
                return _List;
               
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                foreach (var item in gridview.Items)
                {
                 
                    var _Container = gridview.ContainerFromItem(item);
                    var _Children = AllChildren(_Container);
    
                    var image = _Children
                        // only interested in TextBoxes
                        .OfType<Image>()
                        // only interested in FirstName
                        .First(x => x.Name.Equals("image"));
                    image.Width = 900;
    
                }
            }
    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Proposed as answer by Dave SmitsMVP Thursday, May 1, 2014 7:34 AM
    • Marked as answer by LChen_MSDN Friday, May 2, 2014 11:24 PM
    Thursday, May 1, 2014 5:45 AM
  • Thanks for the answer! This looks like a lot of work -- accessing each controls. Is this the only way?

    LChen_MSDN

    Friday, May 2, 2014 10:53 PM
  • A few easier ways. Which to choose depends on exactly what you want:

    Databind the size, pick from a few options with VisualStates, set in PrepareContainerForItemOverride, set in an event on the control.

    When in doubt: Data bind 😃

    Friday, May 2, 2014 11:21 PM
    Owner
  • Thanks Rob!

    LChen_MSDN

    Friday, May 2, 2014 11:24 PM