This is a migrated thread and some comments may be shown as answers.

[Solved] Update pickerbox content from usercontrol

2 Answers 147 Views

PickerBox

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Marco asked on 28 Apr 2012, 07:51 PM

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 Answers, 1 is accepted

answered on 29 Apr 2012, 01:02 PM

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>

<Grid x:Name="LayoutRoot" Background="Transparent">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

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

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<Grid.RowDefinitions>

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

<!--<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 :)