locked
How to show progressRing under a clicked button ?

    Question

  • I have a listview of buttons , when a user clicks the button i want to collapse the clicked button and show a progressRing just under the collapsed button. how can i achieve this??

    Thanks


    19karabo91

    Wednesday, November 12, 2014 11:25 AM

Answers

  •  a simple way, set DataTemplate by usercontrol

    like:

    UserControl XAML

    <UserControl
        x:Class="PickerImage.TemplateControl"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:PickerImage"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300"
        d:DesignWidth="400">
        <Grid>
            <Grid>
                <Grid.RowDefinitions >
                    <RowDefinition Height="48"/>
                    <RowDefinition Height="48"/>
                </Grid.RowDefinitions>
                <TextBlock Text="{Binding Title}"/>
                <Grid x:Name="maingrid" Grid.Row="1">
                    <Button Content="Click" Click="Button_Click" />
                </Grid>
                <Grid x:Name="ringgrid" Visibility="Collapsed" Grid.Row="1">
                    <ProgressRing Width="32" Height="32" IsActive="True"/>
                </Grid>
            </Grid>
        </Grid>
    </UserControl>
    

    UserControl C#

        public sealed partial class TemplateControl : UserControl
        {
            public TemplateControl()
            {
                this.InitializeComponent();
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                maingrid.Visibility = Windows.UI.Xaml.Visibility.Collapsed;  
                ringgrid.Visibility = Windows.UI.Xaml.Visibility.Visible;
            }
        }


    Data Class for testing

       public class MyData
        {
            public string Title { get; set; }
        }
     

    MainPage xaml

    <Page
        x:Class="PickerImage.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:PickerImage"
        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}">
            <Grid.Resources >
                <DataTemplate x:Key="template">
                    <local:TemplateControl />
                </DataTemplate>
            </Grid.Resources>
            <ListView  ItemTemplate="{StaticResource template }" x:Name="listview">
                
            </ListView>
        </Grid>
    </Page>

    MainPage C#

       public sealed partial class MainPage : Page
        {
    
    
            ObservableCollection<MyData> datacollection = new ObservableCollection<MyData>();
            public MainPage()
            {
                this.InitializeComponent();
                BuildData();
                listview.ItemsSource = datacollection; 
            }
    
            private void BuildData()
            {
                //only for build data for testing
                for (int i=0 ;i<10;i++)
                {
                    datacollection.Add(new MyData { Title = i.ToString() }); 
                }
            }
    
        }


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

    Wednesday, November 12, 2014 1:06 PM

All replies

  •  a simple way, set DataTemplate by usercontrol

    like:

    UserControl XAML

    <UserControl
        x:Class="PickerImage.TemplateControl"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:PickerImage"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300"
        d:DesignWidth="400">
        <Grid>
            <Grid>
                <Grid.RowDefinitions >
                    <RowDefinition Height="48"/>
                    <RowDefinition Height="48"/>
                </Grid.RowDefinitions>
                <TextBlock Text="{Binding Title}"/>
                <Grid x:Name="maingrid" Grid.Row="1">
                    <Button Content="Click" Click="Button_Click" />
                </Grid>
                <Grid x:Name="ringgrid" Visibility="Collapsed" Grid.Row="1">
                    <ProgressRing Width="32" Height="32" IsActive="True"/>
                </Grid>
            </Grid>
        </Grid>
    </UserControl>
    

    UserControl C#

        public sealed partial class TemplateControl : UserControl
        {
            public TemplateControl()
            {
                this.InitializeComponent();
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                maingrid.Visibility = Windows.UI.Xaml.Visibility.Collapsed;  
                ringgrid.Visibility = Windows.UI.Xaml.Visibility.Visible;
            }
        }


    Data Class for testing

       public class MyData
        {
            public string Title { get; set; }
        }
     

    MainPage xaml

    <Page
        x:Class="PickerImage.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:PickerImage"
        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}">
            <Grid.Resources >
                <DataTemplate x:Key="template">
                    <local:TemplateControl />
                </DataTemplate>
            </Grid.Resources>
            <ListView  ItemTemplate="{StaticResource template }" x:Name="listview">
                
            </ListView>
        </Grid>
    </Page>

    MainPage C#

       public sealed partial class MainPage : Page
        {
    
    
            ObservableCollection<MyData> datacollection = new ObservableCollection<MyData>();
            public MainPage()
            {
                this.InitializeComponent();
                BuildData();
                listview.ItemsSource = datacollection; 
            }
    
            private void BuildData()
            {
                //only for build data for testing
                for (int i=0 ;i<10;i++)
                {
                    datacollection.Add(new MyData { Title = i.ToString() }); 
                }
            }
    
        }


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

    Wednesday, November 12, 2014 1:06 PM
  • Hi,Please find below link for Progress ring,

    http://www.geekchamp.com/articles/creating-spinning-progress-animation-in-windows-phone-8

    If my reply answers your question, please mark this post as answered.

    Wednesday, November 12, 2014 6:59 PM