Access DataTemplate Control At Run Time

Question

I am Working on Windows phone 8.1.I Making Simple ListView Demo Which is Contain two Image And Two TextBlock.

     <ListView x:Name="lst1" Grid.ColumnSpan="2"  >

        <ListView.ItemTemplate>
        <DataTemplate >
                <Grid>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <Image x:Name="imgSender" Source="Assets/button_register.png"  Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="8,15,8,8" />
                        <TextBlock  Text="{Binding Sender}" FontSize="18" Foreground="Black" FontWeight="Bold" HorizontalAlignment="Center" Margin="0,12,0,0"/>

                    <Image x:Name="imgReceiver" Source="Assets/button_register.png"  Grid.Row="1" Stretch="None" VerticalAlignment="Top" Margin="4,0" />
                    <TextBlock Text="{Binding Receiver}"  FontSize="18" Foreground="Black" FontWeight="Bold" HorizontalAlignment="Center" Grid.Row="1"  VerticalAlignment="Top"/>
                    <Image Source="Assets/scroll_line_addcategory.png" Grid.Row="2" Stretch="None" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="4,8,4,0" />
                </Grid>


            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

And My Problem is That I Want to Set the Visibility of 'imgSender' at Runtime in Xaml.cs File. Is Anybuddy Have Any Idea For Access UI Control Contain by Data Template.

Create a `bool` field in your collection , then bind the visibility to it using a [BooleanToVisibilityConverter](http://www.codeproject.com/Articles/758656/Use-Converters-in-your-Windows-Phone-Apps) `Visibility="{Binding ShowImgReceiver, Converter={StaticResource BooleanToVisibilityConverter}}"` — Barnstokkr, Mar 03 '15 at 12:18
Hello Barnstokkt, I am Beginner so It's might be possible i am Wrong. Is this Possible To do This Without using Any Class..??? — Chirag Solanki, Mar 03 '15 at 13:13
I don't understand what you mean by "Without using Any Class" everything in C# is a class (except technically void) — Barnstokkr, Mar 03 '15 at 14:56

score 1 · Answer 1 · edited Mar 03 '15 at 13:33

 <ListView x:Name="lst1" Grid.ColumnSpan="2"  >

        <ListView.ItemTemplate>
        <DataTemplate >
                <Grid>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <Image  Visibility="{Binding SenderVisibility}" x:Name="imgSender" Source="Assets/button_register.png"  Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="8,15,8,8" />
                        <TextBlock  Text="{Binding Sender}" FontSize="18" Foreground="Black" FontWeight="Bold" HorizontalAlignment="Center" Margin="0,12,0,0"/>

                    <Image x:Name="imgReceiver" Source="Assets/button_register.png"  Grid.Row="1" Stretch="None" VerticalAlignment="Top" Margin="4,0" />
                    <TextBlock Text="{Binding Receiver}"  FontSize="18" Foreground="Black" FontWeight="Bold" HorizontalAlignment="Center" Grid.Row="1"  VerticalAlignment="Top"/>
                    <Image Source="Assets/scroll_line_addcategory.png" Grid.Row="2" Stretch="None" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="4,8,4,0" />
                </Grid>


            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

And my Model Class is public class User : INotifyPropertyChanged { private string sender = string.Empty; private string receiver = string.Empty; private string senderVisibility = string.Empty; private string receiverVisibility = string.Empty; public string Sender { get { return sender; } set { if (value != this.sender) { this.sender = value; NotifyPropertyChanged("Sender"); } } }

    public string Receiver
    {
        get
        {
            return this.receiver;
        }
        set
        {
            if (value != this.receiver)
            {
                this.receiver = value;
                NotifyPropertyChanged("Receiver");
            }
        }
    }
    public string ReceiverVisibility
    {
        get
        {
            return this.receiverVisibility;
        }
        set
        {
            if (value != this.receiverVisibility)
            {
                this.receiverVisibility = value;
                NotifyPropertyChanged("ReceiverVisibility");
            }
        }
    }
    public string SenderVisibility
    {
        get
        {
            return this.senderVisibility;
        }
        set
        {
            if (value != this.senderVisibility)
            {
                this.senderVisibility = value;
                NotifyPropertyChanged("SenderVisibility");
            }
        }
    }

    private void NotifyPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

Ya I have Model Class.If i am use Model Class Than It's Properly Work.but my Question i That If I Don't Want To use Model Class And Access the Property of ImgSender in Xaml.cs Class.Is this Possible..??? — Chirag Solanki, Mar 03 '15 at 13:29
In Xaml.cs access the Model class by (this.DataContext as ClassViewModel).GridViewModel — Justin CI, Mar 03 '15 at 13:31
If you are that particular you can use ContentPresenter contentPresenter = FindVisualChild(yourListBoxItem);DataTemplate yourDataTemplate = contentPresenter.ContentTemplate;Image img = yourDataTemplate.FindName("imgSender", contentPresenter) — Justin CI, Mar 03 '15 at 13:37
http://stackoverflow.com/questions/19379946/how-to-access-a-control-within-data-template-from-code-behind — Justin CI, Mar 03 '15 at 13:37
I m Sorry Guys it's not properly implemented in My Code May Be it's My Mistake.I Will try at my Best.If I got Solution than I am Telling you. And Thank You Very Much Justin — Chirag Solanki, Mar 03 '15 at 13:55

khamitimur · Answer 2 · 2015-03-03T14:27:12.047

0

If your ListView contains only one item you can easily subscribe to Loaded event of imgSender and then control it's Visibility.

private Image _imgSender;

void Image_Loaded(object sender, RoutedEventArgs e)
{
     _imgSender = sender as Image();
}

void AnotherMethod()
{
      if (_imgSender != null)
         _imgSender.Visibility = Visibility.Collapsed;
}

EDIT FOR MULTIPLE ITEMS

void HideImage(int elementIndex)
{
    var container = lst1.ContainerFromIndex(elementIndex) as ListViewItem;

   var imageSender = (container.Content as Grid).Children[0] as Image;
   imageSender.Visibility = Visibility.Collapsed;
}

edited Mar 03 '15 at 14:27

answered Mar 03 '15 at 13:21

khamitimur

1,078
13
22

Ya i know this but I Required Multiple Item. – Chirag Solanki Mar 03 '15 at 13:38
in This Code It's Give me Null Referance Error in Following line. var imageSender = (container.Content as Grid).Children[0] as Image; – Chirag Solanki Mar 03 '15 at 14:05
What is Element Index in This Code..?? I am Pass Following As Static in Page Load Event. var container = lst1.ContainerFromItem(lst1.Items[0]) as ListViewItem; – Chirag Solanki Mar 03 '15 at 14:06
elementIndex - index of ListView item you want to modify. – khamitimur Mar 03 '15 at 14:10
Check Edit in You Code.this Above Edited Code give me null Reference Error. – Chirag Solanki Mar 03 '15 at 14:11
@ChiragSolanki, you may need to chenge 'imageSender' as your DataTemplate may vary. – khamitimur Mar 03 '15 at 14:12
@ChiragSolanki you got NullReferenseException because you run this code in Loaded event of page when ListView HAS NO ITEMS! – khamitimur Mar 03 '15 at 14:14
Here "ls" is public static ObservableCollection ls = new ObservableCollection(); – Chirag Solanki Mar 03 '15 at 14:20
@ChiragSolanki just use the code after you can be 100% sure that ListView had render all it's items properly. – khamitimur Mar 03 '15 at 14:28
@ChiragSolanki, and if it still will get you null exception check if container is null or not. if it's not, check all it's content until you will find your image in children-parent tree. – khamitimur Mar 03 '15 at 14:30

Barnstokkr · Answer 3 · 2015-03-03T15:21:19.920

You can add a BooleanToVisibilityConverter

<Page.Resources>
    <converter:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</Page.Resources>

<ListView x:Name="lst1" Grid.ColumnSpan="2"  
    ItemsSource="{Binding TelecomCollection}">
    <ListView.ItemTemplate>
    <DataTemplate >
            <Grid>

                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <Image x:Name="imgSender" Source="Assets/button_register.png"  Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="8,15,8,8" 
                      Visibility="{Binding ShowImgReceiver, Converter={StaticResource BooleanToVisibilityConverter}}"/>
                    <TextBlock  Text="{Binding Sender}" FontSize="18" Foreground="Black" FontWeight="Bold" HorizontalAlignment="Center" Margin="0,12,0,0"/>

                <Image x:Name="imgReceiver" Source="Assets/button_register.png"  Grid.Row="1" Stretch="None" VerticalAlignment="Top" Margin="4,0" />
                <TextBlock Text="{Binding Receiver}"  FontSize="18" Foreground="Black" FontWeight="Bold" HorizontalAlignment="Center" Grid.Row="1"  VerticalAlignment="Top"/>
                <Image Source="Assets/scroll_line_addcategory.png" Grid.Row="2" Stretch="None" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="4,8,4,0" />
            </Grid>


        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Then in your item class you can add ShowImgReceiver

public class Telecom
{
     string Receiver {get; set;}
     string Sender {get; set;}
     bool ShowImgReceiver{get; set;}
}

In your binding class

public class ViewModel
{
    public ObservableCollection<Telecom> TelecomCollection {get; set;}
}

If you want to make an item's image visibility Collapsed, then

 TelecomCollection[0].ShowImgReceiver = false;

and to make it again Visible

 TelecomCollection[0].ShowImgReceiver = true;

Access DataTemplate Control At Run Time

3 Answers3