Update pickerbox content from usercontrol

3 posts, 0 answers
  1. Marco
    Marco avatar
    20 posts
    Member since:
    May 2011

    Posted 28 Apr 2012 Link to this post

    Hello,

    For my App, I needed a listbox like control, where the user would be able to search in. So I am using the pickerbox. When the user is navigating to that screen, initially the pickerbox shows a line of text (I removed the header and am using the button only) like : --- select ---. The actual popup is an usercontrol, as I needed a TextBox, a Button and a ListBox. 
    Initially when the user tabs the pickerbox button, the listbox in the usercontrol is filled with data from a WCF service. But when the user is not able to select the item he/she was looking for; the Texbox and button act as search tools.

    So: the Page has the Pickerbox and the popup has the usercontrol:
    <telerikPrimitives:RadPickerBox x:Name="lstLocations"
                                                    Content="Select location"
                                                    Grid.Row="2"
                                                    Padding="0"
                                                    Margin="0" Height="80"
                                                    IsFullScreen="True" Style="{StaticResource RadPickerBoxStyle1}">
                        <usercontrol:LocationsControl />
                    </telerikPrimitives:RadPickerBox>


    The usercontrol:
    <Grid x:Name="LayoutRoot" Background="#5B412A">
            <Grid.RowDefinitions>
                <RowDefinition Height="80"/>
                <RowDefinition Height="700"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <StackPanel x:Name="SearchPanel" Grid.Row="0" Margin="0" Orientation="Horizontal">
                <TextBox Height="72" HorizontalAlignment="Left" Margin="10,10,0,0" Name="txtSearch" Text="" VerticalAlignment="Top" Width="380" Grid.Row="0" />
                <Button Width="100" Height="80" Click="btnSearchLocation_Click" VerticalAlignment="Top" Grid.Row="0" BorderThickness="0" Margin="-10,8,0,0" Padding="0" Name="btnSearchLocation">
                    <Image Width="48" Height="48" Name="btnSearch" HorizontalAlignment="Left" Source="/WindowsPhone_App_010;component/Images/search.png" Margin="0" />
                </Button>
            </StackPanel>       
            <ListBox ItemTemplate="{StaticResource LocationItemTemplate}" Grid.RowSpan="2" Height="700"
                     HorizontalAlignment="Left" Margin="10,10,0,0"
                     Name="lstLocations" VerticalAlignment="Top" Width="460" Grid.Row="1" SelectionChanged="lstLocations_SelectionChanged">           
            </ListBox>
            <telerikPrimitives:RadBusyIndicator Background="#CC000000" x:Name="busyIndicator" IsRunning="False" Grid.Row="1"  />
        </Grid>

    The usercontrol has implement the selectionchanged method:
    private void lstLocations_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                Location selectedValue = (Location)e.AddedItems[0];
                var frame = App.Current.RootVisual as PhoneApplicationFrame;
                CreateArticle ca = frame.Content as CreateArticle;
                 
                ca.UpdateListLocations(selectedValue);
                 
            }

    The page implements the UpdateListLocations method like:
    public void UpdateListLocations(Location location) {
                App.LocationViewModel.CurrentLocation = location;
                lstLocations.Content = location.Name;
                lstLocations.IsPopupOpen = false;
                 
            }

    Now everything works, but I need to update the pickerbox, as you see in the method above; lstLocations.Content = location.Name.
    But right now the pickerbox does not update? Is there an way to do this?
  2. Marco
    Marco avatar
    20 posts
    Member since:
    May 2011

    Posted 29 Apr 2012 Link to this post

    Hmm I think I have spotted the flaw, my own to be correct :)
    I had set the value of content in the style template,.... it looks like that will overwrite anything you set in code, makes sense ...
  3. DevCraft banner
  4. Marco
    Marco avatar
    20 posts
    Member since:
    May 2011

    Posted 29 Apr 2012 Link to this post

    Allright, found a better solution for the problem I was trying to solve:

    A page:
    <phone:PhoneApplicationPage
        x:Class="PhoneApp1.MainPage"
        xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
        xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
        mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
        FontFamily="{StaticResource PhoneFontFamilyNormal}"
        FontSize="{StaticResource PhoneFontSizeNormal}"
        Foreground="{StaticResource PhoneForegroundBrush}"
        SupportedOrientations="Portrait" Orientation="Portrait"
        shell:SystemTray.IsVisible="True"
        xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
        xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Core"
        xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives">
        <phone:PhoneApplicationPage.Resources>
            <DataTemplate x:Key="LocationItemTemplate">
                <TextBlock Text="{Binding Name}" FontSize="30" Foreground="White"></TextBlock>
            </DataTemplate>
        </phone:PhoneApplicationPage.Resources>
     
        <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
     
            <!--TitlePanel contains the name of the application and page title-->
            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
     
            <!--ContentPanel - place additional content here-->
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="100"/>
                    <RowDefinition Height="100"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <telerikPrimitives:RadPickerBox Margin="0,0,0,0" VerticalAlignment="Bottom" d:LayoutOverrides="Width" x:Name="rpbLocations" IsFullScreen="True">
                    <Grid x:Name="LayoutPickerBox" Background="Black" Height="800">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="100"/>
                            <RowDefinition Height="700"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
     
     
                        <StackPanel Grid.Row="0" Margin="0" Name="pnlSearchLocations" Orientation="Horizontal">
                            <TextBox Height="72" Name="txtSearch" Text="" Width="360" Margin="0" Padding="0" />
                            <Button Content="S" Height="72" Name="btnSearch" Width="60" Margin="0" Padding="0" Click="btnSearch_Click" />                       
                        </StackPanel>
                        <ListBox Grid.Row="1" Height="700" HorizontalAlignment="Left" Margin="10,0,0,0" Name="lstLocations" VerticalAlignment="Top" Width="460" ItemTemplate="{StaticResource LocationItemTemplate}" SelectionChanged="lstLocations_SelectionChanged"  />
                    </Grid>
     
     
                </telerikPrimitives:RadPickerBox>
                 
            </Grid>
        </Grid>
      
        <!--Sample code showing usage of ApplicationBar-->
        <!--<phone:PhoneApplicationPage.ApplicationBar>
            <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
                <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
                <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
                <shell:ApplicationBar.MenuItems>
                    <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                    <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
                </shell:ApplicationBar.MenuItems>
            </shell:ApplicationBar>
        </phone:PhoneApplicationPage.ApplicationBar>-->
     
    </phone:PhoneApplicationPage>

    And its codebehind: 

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using Microsoft.Phone.Controls;
    using System.Collections.ObjectModel;
     
    namespace PhoneApp1
    {
        public partial class MainPage : PhoneApplicationPage
        {
            private ObservableCollection<Location> _locations;
            private Location selectedLocation;
            // Constructor
            public MainPage()
            {
                InitializeComponent();
            }
     
            protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
            {
                this.InitializePage();
                base.OnNavigatedTo(e);
            }
     
            private void InitializePage() {
                this.LoadCollection();
                this.rpbLocations.Content = "--- select location ---";
                 
                //show only 25 items in initial list....
                var query = (from l in this._locations select l).Take(25);
                this.lstLocations.ItemsSource = query;
            }
     
            /// <summary>
            /// Just load some data...
            /// </summary>
            private void LoadCollection() {
                this._locations = new ObservableCollection<Location>();
                Location loc;
                for (int x = 0; x < 100; x++) {
                    loc = new Location() { Id = x, Name = "Location" + x };
                    this._locations.Add(loc);
                }
            }
     
            private void lstLocations_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                ListBox lst = (ListBox)sender;
                if (lst.SelectedItems.Count > 0)
                {
                    this.selectedLocation = (Location)lst.SelectedItem;
                    rpbLocations.IsPopupOpen = false;
                    this.rpbLocations.Content = this.selectedLocation.Name;
                }
            }
     
            private void btnSearch_Click(object sender, RoutedEventArgs e)
            {
                if (String.IsNullOrEmpty(txtSearch.Text)) MessageBox.Show("No result");
                else {
                    var query = from s in this._locations where s.Name.Equals(txtSearch.Text) select s;
                    if(query.Count()>0) this.lstLocations.ItemsSource = query;
                    else MessageBox.Show("No result");
                }
                 
            }
        }
     
        public class Location {
            public Int32 Id { get; set; }
            public String Name { get; set; }
        }
    }

    it all works now :)


Back to Top