Sunday 28 July 2013

WPF - How to set width to 100 percent

In WPF if you want to set the width of a UI element to 100%, its a bit different from how you do in HTML. The width cannot be set like width="100%".
As we want the element to take all the width available for it within its parent container we will stretch the control to take all the available space within the parent container. For this we will set the "HorizontalContentAlignment" property of the control to "Stretch"
For example if you want a TextBox to change its width dynamically according to the parent container's width set:
<Textbox HorizontalContentAlignment="Stretch"/>

Set default Window / Page - WPF Application

The default page to be loaded in a WPF application is configured in App.xaml file.
By default the project will have App.xaml file as below:

<Application x:Class="Login_WPF.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml">
   <Application.Resources></Application.Resources>
</Application>
Here MainWindow.xaml is the default window set by visual studio.
If you want to change the startup window of the WPF app to MyWindow.xaml, update with this xaml file name as below.
<Application x:Class="Login_WPF.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MyWindow.xaml">
   <Application.Resources></Application.Resources>
</Application>

Wednesday 24 July 2013

LongListSelector: item click (Windows Phone)

Use the SelectionChanged event of LongListSelector to handle the item click action. Windows Phone APIs are still young and doesn't have a straight forward and out of the box API to handle the click event yet. But if you use the SelectionChanged event wisely its a good alternative.

in XAML:
<phone:LongListSelector x:Name="LngLstSel" SelectionChanged="LngLstSel_SelectionChanged">

In CodeBehind (C#):
private void LngLstSel_SelectionChanged(object sender, SelectionChangedEventArgs e) {
  // If selected item is null, do nothing
  if (LngLstSel.SelectedItem != null)
  {
  // Place your logic here.

  // Reset selected item to null
  LngLstSel.SelectedItem = null;
  }
}

Just make sure to check that the LongListSelector's SelectedItem property is not null and after doing your actions in the event, set the LongListSelector's SelectedItem property to null. This will clear off the bug that can happen if you want to select the same item consequently, because the event raises when an item selection is changed.

Tuesday 23 July 2013

'VisualTree' is set more than once - Windows Phone Error

The property 'VisualTree' is set more than once.

If you keep getting this error in your windows phone app, it should be from your XAML. If you have a DataTemplate(<DataTemplate>) and if it has more than one child, it throws this exception.
For example:
<ListBox>
 <ListBox.ItemTemplate>
  <DataTemplate>
   <Image Source="{Binding Path=Image}" />
   <TextBlock Text="{Binding Path=Name}" />
  </DataTemplate>
 </ListBox.ItemTemplate>
</ListBox>

Here there are two direct child controls in the DataTemplate - an Image controld and a TextBlock control. The error can be corrected by placing the two controls inside a container control like a StackPanel. So the above code can be converted as below:
<ListBox>
 <ListBox.ItemTemplate>
  <DataTemplate>
    <StackPanel>
   <Image Source="{Binding Path=Image}" />
   <TextBlock Text="{Binding Path=Name}" />
    </StackPanel>
  </DataTemplate>
 </ListBox.ItemTemplate>
</ListBox>

Now it complies with the rules that a DataTemplate can contain only one direct child control.

Monday 22 July 2013

Detecting Current Theme in Windows Phone - Dark or Light

If you stick to the default themes and brushes in windows phone apps, windows phone would adjust the styles according to the user's selection of dark and light theme settings.
But in cases where your app needs to set custom styles for UI elements, you would want to change styles according to the phone's current theme (Dark or Light).
To accomplish this the technique we use is to rely on some of the system default brushes. Once the system theme changes from Dark to Light and vice versa, the color these system brushes refer to changes automatically. In this example we use the PhoneBackgroundBrush. So when the current theme is Dark, PhoneBackgroundBrush's color is black and when the theme is switched to Light, the brush's color automatically change to White.
Code:
SolidColorBrush bgBrush = Application.Current.Resources["PhoneBackgroundBrush"] as SolidColorBrush;
if (bgBrush.Color == Color.White)
{
// current phone theme is Light
}
else
{
// current phone theme is Dark
}
An alternate approach is as below:
var visibility = (Visibility)Resources["PhoneLightThemeVisibility"];
if(visibility == Visibility.Visible)
{
// current phone theme is Light
}
else
{
// current phone theme is Dark
}
Both approaches work well and currently, there is no other straight forward/cleaner api exposed by windows phone for the functionality.