Popup Windows phone 8 - c#

I create a popup in my windows phone 8 application but my popup take only 1/2 of the width screen, why ?
Xmal of my popup :
<UserControl x:Class="PhoneApp1.PopupRename"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}" d:DesignWidth="480" d:DesignHeight="170">
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="CancelButton" Content="Cancel" Margin="0,0,0,0" VerticalAlignment="Top" Grid.Row="1" Grid.Column="0"/>
<Button x:Name="ValideButton" Content="Valider" Margin="0,0,0,0" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1"/>
<TextBox x:Name="ValueTextBox" Margin="0,5,0,5" TextWrapping="Wrap" Text="" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
</Grid>
And i use this c# code :
Popup renamePopup = new Popup();
renamePopup.VerticalOffset = 100;
renamePopup.HorizontalOffset = 10;
PopupRename popupRename = new PopupRename();
renamePopup.Child = popupRename;
renamePopup.IsOpen = true;
popupRename.ValideButton.Click += (s, args) =>
{
renamePopup.IsOpen = false;
//this.text.Text = Mycontrol.tbx.Text;
};
popupRename.CancelButton.Click += (s, args) => { renamePopup.IsOpen = false; };

You must set your popup width to full width:
Width = (Application.Current.RootVisual as PhoneApplicationFrame).ActualWidth
In your example you also can use LayoutRoot.ActualWidth

Related

Impossible to update textbox from another frame, how I can fix that?

I'm creating a small numeric keyboard like those on our smartphones, when I press a key, the digit must be written in a TextBox.
This is where I have a problem, I can not update my TextBox when I press a button.
My window is decomposed into two frames of the same width, the keyboard is on the left frame and the TextBox on the right frame.
I call a method in my Clavier.xaml.cs page:
CallSection EtablissementAppel = new CallSection();
private void UpdateTextBox(string _UpdatePrefix, string _UpdateNumeroDestinataire)
{
EtablissementAppel.UpdateEtablissementAppel(_UpdatePrefix, _UpdateNumeroDestinataire);
}
Method in the CallSection.xaml.cs file:
public void UpdateEtablissementAppel(string p, string n)
{
string Numero = p + n;
EtablissementAppel.Text = Numero;
}
Code CallSection.xaml :
<TextBox x:Name="EtablissementAppel" Margin="5,5,5,5" PlaceholderText="ETABLISSEMENT D'APPEL" VerticalAlignment="Center" Grid.Column="0" Grid.ColumnSpan="2" Height="37"/>
Yet the TextBox does not want to update itself. Knowing that I can change its text anywhere in the file CallSection.xaml.cs but not in this method.
EDIT :
To give more details in relation to the first comments.
Method in CallSection.xaml.cs with a Debug.WriteLine() :
public void UpdateEtablissementAppel(string p, string n)
{
string Numero = p + n;
Debug.WriteLine(Numero);
EtablissementAppel.Text = Numero;
}
Here I can see in the debugger all my numbers tapped. But textbox doesn't update.
Debugger output :
12255
122552
1225525
12255255
122552555
CallSection.xaml :
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PhonieMartha"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Custom="using:Microsoft.UI.Xaml.Controls"
x:Class="PhonieMartha.CallSection"
mc:Ignorable="d" Loaded="Page_Loaded"
>
<Page.Resources>
<SolidColorBrush x:Key="GraySelected" Color="#FFA3A3A3"/>
<SolidColorBrush x:Key="GrayUnselected" Color="#33000000"/>
</Page.Resources>
<Page.Background>
<ThemeResource ResourceKey="ApplicationPageBackgroundThemeBrush"/>
</Page.Background>
<Grid x:Name="GrillePrincipale">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox x:Name="EtablissementAppel" Margin="5,5,5,5" PlaceholderText="ETABLISSEMENT D'APPEL" VerticalAlignment="Center" Grid.Column="0" Grid.ColumnSpan="2" Height="37"/>
<Rectangle x:Name="Call1" HorizontalAlignment="Stretch" Margin="5,5,5,5" VerticalAlignment="Stretch" Fill="#33000000" FocusVisualPrimaryBrush="#FFE03535" Grid.Row="1" Grid.Column="0" Tapped="Call1_Tapped"/>
<Rectangle x:Name="Call2" HorizontalAlignment="Stretch" Margin="5,5,5,5" VerticalAlignment="Stretch" Fill="#33000000" FocusVisualPrimaryBrush="#FFE03535" Grid.Row="1" Grid.Column="1" Tapped="Call2_Tapped"/>
<Rectangle x:Name="Call3" HorizontalAlignment="Stretch" Margin="5,5,5,5" VerticalAlignment="Stretch" Fill="#33000000" FocusVisualPrimaryBrush="#FFE03535" Grid.Row="2" Grid.Column="0" Tapped="Call3_Tapped"/>
<Rectangle x:Name="Call4" HorizontalAlignment="Stretch" Margin="5,5,5,5" VerticalAlignment="Stretch" Fill="#33000000" FocusVisualPrimaryBrush="#FFE03535" Grid.Row="2" Grid.Column="1" Tapped="Call4_Tapped"/>
<Rectangle x:Name="Call5" HorizontalAlignment="Stretch" Margin="5,5,5,5" VerticalAlignment="Stretch" Fill="#33000000" FocusVisualPrimaryBrush="#FFE03535" Grid.Row="3" Grid.Column="0" Tapped="Call5_Tapped"/>
<Rectangle x:Name="Call6" HorizontalAlignment="Stretch" Margin="5,5,5,5" VerticalAlignment="Stretch" Fill="#33000000" FocusVisualPrimaryBrush="#FFE03535" Grid.Row="3" Grid.Column="1" Tapped="Call6_Tapped"/>
<Rectangle x:Name="Call7" HorizontalAlignment="Stretch" Margin="5,5,5,5" VerticalAlignment="Stretch" Fill="#33000000" FocusVisualPrimaryBrush="#FFE03535" Grid.Row="4" Grid.Column="0" Tapped="Call7_Tapped"/>
<Rectangle x:Name="Call8" HorizontalAlignment="Stretch" Margin="5,5,5,5" VerticalAlignment="Stretch" Fill="#33000000" FocusVisualPrimaryBrush="#FFE03535" Grid.Row="4" Grid.Column="1" Tapped="Call8_Tapped"/>
<TextBox x:Name="RenvoiAppel" Margin="5,5,5,5" PlaceholderText="RENVOI D'APPEL" VerticalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="2" Height="37" Grid.Row="5" InputScope="Number"/>
<TextBox x:Name="MessageRecu" Margin="5,5,5,5" Text="" VerticalAlignment="Stretch" Grid.Column="2" Grid.Row="4" Grid.ColumnSpan="2"/>
<ToggleSwitch x:Name="ToggleSwitchRenvoiAppel" Margin="5,5,5,5" OnContent="On" OffContent="Off" Grid.Column="2" Grid.Row="5" HorizontalAlignment="Center" Toggled="ToggleSwitchRenvoiAppel_Toggled"/>
<TextBlock Grid.Column="3" Margin="5,5,5,5" Grid.Row="5" Text="PhonieMartha Rev1.0" TextWrapping="Wrap" VerticalAlignment="Stretch" TextAlignment="Center" FontSize="12"/>
</Grid>
</Page>
Here is the XAML code of the MainPage that contains the two frames :
<Page
x:Class="PhonieMartha.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PhonieMartha"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="GrilleMainPage">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame x:Name="CallsSection" Grid.Column="1"/>
<NavigationView x:Name="NavView" SelectionChanged="NavView_SelectionChanged" IsBackButtonVisible="Collapsed" PaneDisplayMode="Auto" CompactModeThresholdWidth="300" ExpandedModeThresholdWidth="550" Grid.Column="0">
<NavigationView.MenuItems>
<NavigationViewItem Icon="PhoneBook" Content="Annuaire général" Tag="AnnuaireGeneral"/>
<NavigationViewItem Icon="PhoneBook" Content="Annuaire personnel" Tag="AnnuairePersonnel"/>
<NavigationViewItem Content="Clavier" Tag="Clavier">
<NavigationViewItem.Icon>
<FontIcon Glyph="" FontFamily="Segoe MDL2 Assets"/>
</NavigationViewItem.Icon>
</NavigationViewItem>
<NavigationViewItem Content="Mode conférence" Tag="Conference">
<NavigationViewItem.Icon>
<FontIcon Glyph="" FontFamily="Segoe MDL2 Assets"/>
</NavigationViewItem.Icon>
</NavigationViewItem>
<NavigationViewItem Icon="Help" Content="Aide" Tag="Aide"/>
<NavigationViewItem Icon="Admin" Content="Mode instructeur" Tag="Instructeur"/>
</NavigationView.MenuItems>
<Frame x:Name="ContentFrame"/>
</NavigationView>
</Grid>
</Page>
You are creating a new instance of CallSection and then call the UpdateEtablissementAppel method of this one. This will obviously not affect the instance that you see on the screen. You need to get a reference to the existing instance and call its UpdateEtablissementAppel method.
You could use the following helper method to get a reference to the parent MainPage:
private static T FindParent<T>(DependencyObject dependencyObject) where T : DependencyObject
{
var parent = VisualTreeHelper.GetParent(dependencyObject);
if (parent == null) return null;
var parentT = parent as T;
return parentT ?? FindParent<T>(parent);
}
And then cast the Content of the "CallsSection" Frame:
private void UpdateTextBox(string _UpdatePrefix, string _UpdateNumeroDestinataire)
{
MainPage mainPage = FindParent<MainPage>(this);
if (mainPage != null)
{
CallSection cellSection = mainPage.CallsSection.Content as CallSection;
if (cellSection != null)
cellSection.UpdateEtablissementAppel(_UpdatePrefix, _UpdateNumeroDestinataire);
}
}
You also need to make the Frame accessible from other classes. You can do this returning a reference to it from a public property of MainPage.xaml.cs, or by using the x:FieldModifier attribute directly in the XAML markup:
<Frame x:Name="CallsSection" x:FieldModifier="public" Grid.Column="1"/>

Winrt Wpf databinding

I am having no luck finding the issue of data binding not working. I have two user controls. The user control that uses the obervablecollection works fine. The user control bound to an object doesnt. If i assign the value to the text the value does appear. During debugging I can verify that the values are correct.
This logic is following Paul Sheriff and a few posts from this web site.
My coworkers dont program in C# so they cant help. Im missing something but have no idea what it is.
ViewModel class that inherits from INotifyPropertyChanged:
ParameterSettings _ps;
public ParameterSettings DetailData
{
get { return _ps; }
set
{
_ps = value;
RaisePropertyChanged("DetailData");
}
}
public async Task GetParameters()
{
var pm = new ParameterManager();
DetailData = new ParameterSettings();
await pm.GetLoginCredentials(_ps);
}
this is the code the user control.
ViewModels.ParameterSettingsVm _viewModel;
public ParameterSettingsUc()
{
this.InitializeComponent();
_viewModel = (ParameterSettingsVm)Resources["viewModel"];
var bounds = Window.Current.Bounds;
this.CancelBtn.Width = bounds.Width * .5;
this.SaveBtn.Width = bounds.Width * .5;
}
private async void UserControl_Loaded(object sender, RoutedEventArgs e)
{
await _viewModel.GetParameters();
//UserNameBx.Text = _viewModel.DetailData.UserLogin; //textbox gets filled in.
}
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SiteManager.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:VM="using:SiteManager.ViewModels"
x:Class="SiteManager.Views.ParameterSettingsUc"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400"
Loaded="UserControl_Loaded">
<UserControl.Resources>
<VM:ParameterSettingsVm x:Key="viewModel"></VM:ParameterSettingsVm>
</UserControl.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<TextBox Header="Login:" VerticalAlignment="Center" Margin="2,10,0,0" Grid.Row="0" x:Name="UserNameBx" Text="{Binding Path=DetailData.UserLogin, Mode=TwoWay, UpdateSourceTrigger=Default}" >
<TextBox.DataContext>
<VM:ParameterSettingsVm/>
</TextBox.DataContext>
</TextBox>
I would change is it to make the ViewModel a property.
ViewModels.ParameterSettingsVm _viewModel {get;set;}
public ParameterSettingsUc()
{
this.InitializeComponent();
_viewModel = (ParameterSettingsVm)Resources["viewModel"];
var bounds = Window.Current.Bounds;
this.CancelBtn.Width = bounds.Width * .5;
this.SaveBtn.Width = bounds.Width * .5;
}
private async void UserControl_Loaded(object sender, RoutedEventArgs e)
{
await _viewModel.GetParameters();
//UserNameBx.Text = _viewModel.DetailData.UserLogin; //textbox gets filled in.
}
and then I would set the _viewModel as the data context for the textBox. Oh and set the dataContext for the usercontrol to self, like this.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SiteManager.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:VM="using:SiteManager.ViewModels"
x:Class="SiteManager.Views.ParameterSettingsUc"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
Loaded="UserControl_Loaded">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<TextBox Header="Login:" VerticalAlignment="Center"
Margin="2,10,0,0" Grid.Row="0" x:Name="UserNameBx"
Text="{Binding Path=DetailData.UserLogin, Mode=TwoWay, UpdateSourceTrigger=Default}"
DataContext={Binding _viewModel}>
</TextBox>
This may not be what you're trying to do though. I just assumed since you're creating _viewModel you would want to use it.
From microsoft virtual academy. Used x:bind its faster and less verbose.
mva.microsoft.com/en-US/training-courses/windows-10-data-binding-14579. Each class property i made into a INotfiyChange property of the vm.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SiteManager.Views"
xmlns:VM="using:SiteManager.ViewModels"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:diag="using:System.Diagnostics"
x:Class="SiteManager.Views.ParameterSettingsUc"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400"
Loaded="UserControl_Loaded" >
<UserControl.DataContext>
<VM:ParameterSettingsVm></VM:ParameterSettingsVm>
</UserControl.DataContext>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="70"/>
<RowDefinition Height="70"/>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<TextBox Header="Login:" VerticalAlignment="Center" Margin="2,10,0,0" Grid.Row="0" x:Name="UserNameBx" Text="{x:Bind Path=_viewModel.UserLogin, Mode=TwoWay }" > </TextBox>
<TextBox Header="Password:" VerticalAlignment="Center" Margin="1" Grid.Row="1" x:Name="PasswordBx" Text="{x:Bind Path=_viewModel.UserPassword, Mode=TwoWay }"> </TextBox>
<TextBox Header="Mature Key:" VerticalAlignment="Center" Margin="1" Grid.Row="2" x:Name="MatureKeyBx" Text="{x:Bind Path=_viewModel.MatureKey, Mode=TwoWay }"> </TextBox>
public sealed partial class ParameterSettingsUc : UserControl
{
ParameterSettingsVm _viewModel { get; set; } = new ParameterSettingsVm();
string _userLogin;
public string UserLogin
{
get { return _userLogin; }
set
{
_userLogin = value;
RaisePropertyChanged("UserLogin");
}
}

Set button margin with auto window size

I've created a simple custom messagebox that automatically scales depending on the length of the text to be displayed :
public partial class CustomMessageBox : Window
{
public CustomMessageBox(string title, string text)
{
InitializeComponent();
ResizeMode = ResizeMode.NoResize;
label.Content = text;
Title = title;
}
public static void Show(string title, string text)
{
CustomMessageBox box = new CustomMessageBox(title, text);
box.SizeToContent = SizeToContent.WidthAndHeight;
box.ShowDialog();
}
private void button_Click(object sender, RoutedEventArgs e)
{
Close();
}
}
This works nicely however my button is clamping to the bottom side of the window because the window automatically scales :
And the button seems to be moving once the message gets longer :
How would I make sure the button stays centered and have a margin of around 10px from the bottom so it doesn't look that clamped?
I tried to set the Margin manually but that doesn't seem to work.
XAML (largely generated by the designer) :
<Window x:Class="RapidEvent.CustomMessageBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:RapidEvent"
mc:Ignorable="d"
Background="{DynamicResource WindowBackgroundBrush}"
Title="" Height="Auto" Width="Auto">
<Grid>
<StackPanel>
<Label x:Name="label" Content="" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top" FontSize="13px" RenderTransformOrigin="0.392,0.486"/>
<Button x:Name="button" x:FieldModifier="public" IsDefault="True" Content="_Ok" HorizontalAlignment="Left" Margin="110,40,0,0" VerticalAlignment="Top" Width="80" Height="21" Click="button_Click"/>
</StackPanel>
</Grid>
</Window>
Simply change your StackPanel to a Grid and the HorizonalAlignment of your button to Center and take off all but the bottom margin. You'll also need to set the VerticalAlignment to Bottom. You also need to put the button on row 1.
This way the button will be clamped to the bottom of the dialog and always centred.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label x:Name="label" Content=""
HorizontalAlignment="Left" Margin="10,0,0,0"
VerticalAlignment="Top" FontSize="13px"
RenderTransformOrigin="0.392,0.486"/>
<Button Grid.Row="1" x:Name="button" x:FieldModifier="public"
IsDefault="True" Content="_Ok"
HorizontalAlignment="Center" Margin="0,0,0,20"
VerticalAlignment="Bottom" Width="80" Height="21"/>
</Grid>
Use grid instead of StackPanel:
<Grid >
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<telerik:Label x:Name="label" Content="LSFFD" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top" FontSize="13px" RenderTransformOrigin="0.392,0.486"/>
<Button Grid.Row="1" x:Name="button" x:FieldModifier="public" Content="_Ok" HorizontalAlignment="Center" Margin="0 0 0 10" VerticalAlignment="Bottom" Width="80" Height="21" Click="button_Click"/>
</Grid>

How to change a grid layout when orientation is changed

I'm creating a win8 app and I need to change the layout of my grid so everything fits on screen when the user flips between orientations. I understand I need to use VisualStateManager but I can't understand any tutorials. If I have this code:
<Grid>
<Button x:Name="button1" Margin="188,73,286,0" VerticalAlignment="Top"/>
<Button x:Name="button2" Margin="236,73,238,0" VerticalAlignment="Top"/>
<Button x:Name="button3" Margin="284,73,190,0" VerticalAlignment="Top"/>
</Grid>
How would I use visual state manager to change the buttons so they are now orientated in a column (one above the other) instead of in a row when the orientation is changed to portrait from landscape?
Thanks
xaml code
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" SizeChanged="Page_SizeChanged_1">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="FullScreenLandscape">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="Button1" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
<Button Content="Button2" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
<Button Content="Button3" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
</Grid>
<Grid x:Name="Snapped">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Button Content="Button1" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
<Button Content="Button2" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
<Button Content="Button3" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
</Grid>
</Grid>
C# code
private void Page_SizeChanged_1(object sender, SizeChangedEventArgs e)
{
switch (ApplicationView.Value)
{
case ApplicationViewState.FullScreenLandscape:
VisualStateManager.GoToState(this, "FullScreenLandscape", false);
Snapped.Visibility = Visibility.Collapsed;
break;
case ApplicationViewState.Snapped:
VisualStateManager.GoToState(this, "Snapped", false);
FullScreenLandscape.Visibility = Visibility.Collapsed;
Snapped.Visibility = Visibility.Visible;
break;
default:
return;
}
}
Another Method
xaml code
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="landscape">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBox x:Name="t1" Grid.Column="0" FontSize="24" Height="100"/>
<TextBox x:Name="t2" Grid.Column="1" FontSize="24" Height="100"/>
<TextBox x:Name="t3" Grid.Column="2" FontSize="24" Height="100"/>
</Grid>
<Grid x:Name="snap" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
</Grid>
</Grid>
C# code
private void Page_SizeChanged_1(object sender, SizeChangedEventArgs e)
{
if (Windows.UI.ViewManagement.ApplicationView.Value == Windows.UI.ViewManagement.ApplicationViewState.FullScreenLandscape)
{
landscape.Visibility = Windows.UI.Xaml.Visibility.Visible;
snap.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
t1.SetValue(Grid.ColumnProperty, 0);
t2.SetValue(Grid.ColumnProperty, 1);
if (t1.Parent != landscape)
{
snap.Children.Remove(t1);
snap.Children.Remove(t2);
landscape.Children.Add(t1);
landscape.Children.Add(t2);
}
}
else if(Windows.UI.ViewManagement.ApplicationView.Value == Windows.UI.ViewManagement.ApplicationViewState.Snapped)
{
landscape.Children.Remove(t1);
landscape.Children.Remove(t2);
landscape.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
snap.Visibility = Windows.UI.Xaml.Visibility.Visible;
t1.SetValue(Grid.RowProperty, 0);
t2.SetValue(Grid.RowProperty, 1);
if (t1.Parent != snap)
{
landscape.Children.Remove(t1);
landscape.Children.Remove(t2);
snap.Children.Add(t1);
snap.Children.Add(t2);
}
}
}

Get selected items from Listbox

I am creating Windows Phone 8 app working with Nokia Mix Radio SDK. I have Listbox contains Genres. Each item (genre) in the ListBox has CheckBox, so that user can select only items he wants to listen to. How can I know what genres user selected?
Here is my XAML:
<phone:PhoneApplicationPage
x:Class="MusicApp.GenrePage"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<!--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 Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock 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="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListBox x:Name="GenresListBox" Grid.Row="0" >
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Name}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Grid.Row="1" Content="Button" HorizontalAlignment="Left" Name="SelectButton" VerticalAlignment="Top" Click="SelectButton_Click"/>
</Grid>
</Grid>
Here is my code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
namespace MusicApp
{
public partial class GenrePage : PhoneApplicationPage
{
public GenrePage()
{
InitializeComponent();
}
private async void GetGenres()
{
var genres = await App.GetClient().GetGenresAsync();
GenresListBox.ItemsSource = genres;
if (genres.Result == null || genres.Count == 0)
{
MessageBox.Show("No results available");
}
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
GetGenres();
}
private void SelectButton_Click(object sender, RoutedEventArgs e)
{
var selectedGenres = GenresListBox.SelectedItems;
}
}
}
I did little change in your code. try this it help you
xaml
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListBox x:Name="GenresListBox" Grid.Row="0" SelectionChanged ="GenresListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Name}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Grid.Row="1" Content="Button" HorizontalAlignment="Left" Name="SelectButton" VerticalAlignment="Top" Click="SelectButton_Click"/>
</Grid>
IN Code Beind
private void GenresListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (GenresListBox.SelectedIndex == -1)
return;
}
private void SelectButton_Click(object sender, RoutedEventArgs e)
{
var selectedGenres = GenresListBox.SelectedItem;
}
I solved my problem using Windows Phone Toolkit's LongListMultiSelector.
This is how it's going to look like:
Now my XAML is:
<phone:PhoneApplicationPage
x:Class="MusicApp.GenrePage"
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"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<!--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 Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock 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="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<toolkit:LongListMultiSelector x:Name="GenresListBox" Grid.Row="0" >
<toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>
</toolkit:LongListMultiSelector>
<Button Grid.Row="1" Content="Button" HorizontalAlignment="Left" Name="SelectButton" VerticalAlignment="Top" Click="SelectButton_Click"/>
</Grid>
</Grid>
And code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using Nokia.Music.Types;
namespace MusicApp
{
public partial class GenrePage : PhoneApplicationPage
{
public GenrePage()
{
InitializeComponent();
}
private async void GetGenres()
{
var genres = await App.GetClient().GetGenresAsync();
GenresListBox.ItemsSource = genres;
if (genres.Result == null || genres.Count == 0)
{
MessageBox.Show("No results available");
}
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
GetGenres();
}
private void SelectButton_Click(object sender, RoutedEventArgs e)
{
var genres = GenresListBox.SelectedItems;
}
}
}

Categories