Update pickerbox content from usercontrol

[Marco]

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?

[Marco]

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 ...

[Marco]

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

A page:

<phone:PhoneApplicationPage
    x:Class="PhoneApp1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    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 :)