locked
XAML : Binding inside ListView RRS feed

  • Question

  • I'm using the next code to display a ListView. The ListView contains a TextBlock which has a FontSized bound to a variable on my MainPage :

    <ListView x:Name="ListView" SelectionMode="Single" SelectionChanged="ListView_OnSelectionChanged" Grid.Row="1" Margin="8,16" > <ListView.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding DisplayName}" FontSize="{Binding Path=FontSizeListViewTitle}"

    Margin="6,0,0,0" TextWrapping="NoWrap" /> </StackPanel> </DataTemplate> </ListView.ItemTemplate> </ListView>

    The problem is that FontSize="{Binding Path=FontSizeListViewTitle}" doesn't appear to work correctly. It shows me the text with a fontSize close to 6 (or something) despite the fact that the variable FontSizeListViewTitle only takes values between 16 and 24.

    What's interesting is the fact that if I put the TextBlock outside the ListView, it works perfect. The problem only appears when I try to use the binding inside the ListView. Also, the Text="{Binding DisplayName} works perfectly and the TextBlock shows the text that it has to show.

    Some code from the .cs file now :

        private int _fontSizeListViewTitle;
        public int FontSizeListViewTitle
        {
            get { return _fontSizeListViewTitle; }
            set
            {
                _fontSizeListViewTitle = value;
    
                OnPropertyChanged("FontSizeListViewTitle");
            }
        }
    
        #region INotifyPropertyChanged implementation
        public event PropertyChangedEventHandler PropertyChanged;
    
        internal void OnPropertyChanged(string propertyName)
        {
            var handler = PropertyChanged;
            if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    
        public MainPage()
        {
    
            InitializeComponent();
    
            this.DataContext = this;
    
            ListView.ItemsSource = MyList; // MyList is an Observable Collection
        }

    • Edited by ArchTM Saturday, December 21, 2013 8:20 PM
    Saturday, December 21, 2013 8:19 PM

Answers

  • OK, I managed to resolve the problem by changing only the XAML code :

     FontSize="{Binding ElementName=MediaFilesListView ,
    Path=FontSize, 
    Converter={StaticResource TextFontLayoutConverter} , 
    ConverterParameter='ListViewTitle'}"

    The Converter just returns the FontSizeListViewTitle. I also pass a ConverterParameter in case that I will need to add more TextBlock-s in the ListView that will need a different FontSize.
    • Marked as answer by ArchTM Monday, December 23, 2013 5:00 PM
    • Edited by ArchTM Monday, December 23, 2013 5:02 PM
    Monday, December 23, 2013 5:00 PM

All replies

  • Is FontSizeListViewTitle in the itemsource the listview is bound to?

    I suspect you might have to either add it to the class the listview is bound to or make FontSizeListViewTitle a static resource for the page

    Sunday, December 22, 2013 2:00 PM
  • OK, I managed to resolve the problem by changing only the XAML code :

     FontSize="{Binding ElementName=MediaFilesListView ,
    Path=FontSize, 
    Converter={StaticResource TextFontLayoutConverter} , 
    ConverterParameter='ListViewTitle'}"

    The Converter just returns the FontSizeListViewTitle. I also pass a ConverterParameter in case that I will need to add more TextBlock-s in the ListView that will need a different FontSize.
    • Marked as answer by ArchTM Monday, December 23, 2013 5:00 PM
    • Edited by ArchTM Monday, December 23, 2013 5:02 PM
    Monday, December 23, 2013 5:00 PM
  • Hi ArchTM


    Good thinking for your solution to accomplishing the requirement. But We have option for binding property from view model other than listview itemsource property.

    kindly refer the below example it will be help for your scenario.

    <Page

        x:Class="DataValidation.MainPage"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:local="using:DataValidation"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:Extension ="using:Validation.Extension"  

        mc:Ignorable="d"

        x:Name="mainWindow">

        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" >       

     

            <ListView x:Name="ListView1" SelectionMode="Single" Margin="8,16" >

                <ListView.ItemTemplate>

                    <DataTemplate>

                        <StackPanel>

                            <TextBlock Text="{Binding TemplateName}" FontSize="{Binding Path=DataContext.FontSizeListViewTitle,ElementName=mainWindow}"  Margin="6,0,0,0" TextWrapping="NoWrap" />

                        </StackPanel>

                    </DataTemplate>

                </ListView.ItemTemplate>

            </ListView>

        </Grid>

    </Page>

     

    public sealed partial class MainPage : Page, INotifyPropertyChanged

        {

            List<CustomItem> item = new List<CustomItem>();

            public MainPage()

            {

                this.InitializeComponent();

                item.Add(new CustomItem() { TemplateName = "HorizontalItemTemplate" });

                item.Add(new CustomItem() { TemplateName = "VerticalItemTemplate" });

                item.Add(new CustomItem() { TemplateName = "HorizontalItemTemplate" });

                item.Add(new CustomItem() { TemplateName = "VerticalItemTemplate" });

                item.Add(new CustomItem() { TemplateName = "HorizontalItemTemplate" });

                this.DataContext = this;

                FontSizeListViewTitle = 30;

                ListView1.ItemsSource = item;

            }

     

            public event PropertyChangedEventHandler PropertyChanged;

     

            internal void OnPropertyChanged(string propertyName)

            {

                var handler = PropertyChanged;

                if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));

            }

     

            private int _fontSizeListViewTitle = 30;

            public int FontSizeListViewTitle

            {

                get

                {

                    return _fontSizeListViewTitle;

               

                }

                set

                {

                    _fontSizeListViewTitle = value;

                    OnPropertyChanged("FontSizeListViewTitle");

                }

            }

        }




    Friday, January 3, 2014 7:29 AM