locked
Resize ListViewItems

    Question

  • Hi there, i have a small problem with changing the width of the listviewitems.

    In my app i have a page that has a frame inside it, this frame will host several pages throughout the app life cycle.

    One of the pages i have (which will be hosted in that frame) is made of a ListView inside a semanticzoom inside a grid.

    That page takes the full size of the parent frame, all the controls on this page (listview and semanticzoom) resize correctly when snapping the app (MinWidth is set to 500px). The ListViewItem has a custom style to display my class and its width is bound to the listview actual width like this:

    MaxWidth="{Binding ActualWidth, ElementName=MainListView, Mode=OneWay}"

    but whenever i snap the app everything is properly resized except for the listviewitems.

    Tried to bind a text block to the same element and path, but the text will only show the start value and it will no longer update it.

    Is there a way to force the binding engine to update the value when resizing?

    Thank you all.

    Rafael

    Monday, December 29, 2014 11:32 AM

Answers

  • Try do this effect by ItemContainerStyle as below.

    <Page
        x:Class="ListViewAutoSanpWidth.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:ListViewAutoSanpWidth"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <ListView x:Name="listview" >
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate >
                    <DataTemplate >
                        <Border Margin="6" BorderBrush="Yellow" BorderThickness="4">
                            <TextBlock Text="{Binding}" FontSize="24"/>
                        </Border>
                    </DataTemplate>
                </ListView.ItemTemplate>
              </ListView>
        </Grid>
    </Page>
    namespace ListViewAutoSanpWidth
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                List<string> list = new List<string>();
                for(int i=100;i< 110;i++)
                {
                    list.Add(i.ToString());
                }
                listview.ItemsSource = list; 
            }
        }
    }
    



    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。


    • Edited by Bill ChungMVP Monday, December 29, 2014 7:52 PM
    • Marked as answer by RafaelY Tuesday, December 30, 2014 8:13 AM
    Monday, December 29, 2014 7:52 PM

All replies

  • Please link us to a project of this app.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, December 29, 2014 7:47 PM
    Moderator
  • Try do this effect by ItemContainerStyle as below.

    <Page
        x:Class="ListViewAutoSanpWidth.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:ListViewAutoSanpWidth"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <ListView x:Name="listview" >
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate >
                    <DataTemplate >
                        <Border Margin="6" BorderBrush="Yellow" BorderThickness="4">
                            <TextBlock Text="{Binding}" FontSize="24"/>
                        </Border>
                    </DataTemplate>
                </ListView.ItemTemplate>
              </ListView>
        </Grid>
    </Page>
    namespace ListViewAutoSanpWidth
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                List<string> list = new List<string>();
                for(int i=100;i< 110;i++)
                {
                    list.Add(i.ToString());
                }
                listview.ItemsSource = list; 
            }
        }
    }
    



    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。


    • Edited by Bill ChungMVP Monday, December 29, 2014 7:52 PM
    • Marked as answer by RafaelY Tuesday, December 30, 2014 8:13 AM
    Monday, December 29, 2014 7:52 PM
  • Try do this effect by ItemContainerStyle as below.

    <Page
        x:Class="ListViewAutoSanpWidth.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:ListViewAutoSanpWidth"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <ListView x:Name="listview" >
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate >
                    <DataTemplate >
                        <Border Margin="6" BorderBrush="Yellow" BorderThickness="4">
                            <TextBlock Text="{Binding}" FontSize="24"/>
                        </Border>
                    </DataTemplate>
                </ListView.ItemTemplate>
              </ListView>
        </Grid>
    </Page>
    namespace ListViewAutoSanpWidth
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                List<string> list = new List<string>();
                for(int i=100;i< 110;i++)
                {
                    list.Add(i.ToString());
                }
                listview.ItemsSource = list; 
            }
        }
    }



    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。


    Interesting solution, i am going to try this and i will get back to you with the result ASAP.

    Thank you

    Tuesday, December 30, 2014 8:03 AM
  • Please link us to a project of this app.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Hey Matt, do you mean you need the complete solution files or just the XAML for the ListViewItem style?

    Thank you

    Tuesday, December 30, 2014 8:03 AM
  • Try do this effect by ItemContainerStyle as below.

    <Page
        x:Class="ListViewAutoSanpWidth.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:ListViewAutoSanpWidth"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <ListView x:Name="listview" >
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate >
                    <DataTemplate >
                        <Border Margin="6" BorderBrush="Yellow" BorderThickness="4">
                            <TextBlock Text="{Binding}" FontSize="24"/>
                        </Border>
                    </DataTemplate>
                </ListView.ItemTemplate>
              </ListView>
        </Grid>
    </Page>
    namespace ListViewAutoSanpWidth
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                List<string> list = new List<string>();
                for(int i=100;i< 110;i++)
                {
                    list.Add(i.ToString());
                }
                listview.ItemsSource = list; 
            }
        }
    }
    



    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。


    Thank you so much Mr. Bill Chung, this solution worked perfectly. I appreciate you taking the time to give me a good answer.

    Thank you again.

    Rafael

    Tuesday, December 30, 2014 8:14 AM