I am trying to change background of my listpicker to some image. I was searching and I guess for do this I must implement my own version of listpicker, am I right? So I downloaded code from Windows Phone toolkit and get code for listpicker from it and other necessary things. I build my project and It's working but the problem is that I don't have rectangle where can I click to see choices in listpicker but I have list with choices in place where should be just that rectangle. What I am doing wrong? How can I fix this problem. Then I guess I could change ListPickerPage.xaml and use PickerPageUri property. Is it right? Thanks
Edit: Code in xaml page with listpicker:
<customControls:ListPicker x:Name="LpkViolations" BorderBrush="{StaticResource PhoneForegroundBrush}"
SelectionChanged="LpkViolations_OnSelectionChanged"
FullModeItemTemplate="{StaticResource LpkFullItemTemplate}"
ItemTemplate="{StaticResource LpkItemTemplate}"
PickerPageUri="/Design/CustomControls/ListPickerPage.xaml">
and resources:
<phone:PhoneApplicationPage.Resources>
<converters:UpperConverter x:Key="upperConverter"></converters:UpperConverter>
<DataTemplate x:Name="LpkItemTemplate">
<TextBlock Text="{Binding Path=AppResources.add_user_violation_title, Source={StaticResource LocalizedStrings}}" />
</DataTemplate>
<DataTemplate x:Name="LpkFullItemTemplate">
<Grid Margin="0,0,0,36">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Points}" FontSize="48"
Foreground="DarkBlue"
VerticalAlignment="Top"
HorizontalAlignment="Center"
Width="50"
Visibility="{StaticResource PhoneLightThemeVisibility}"/>
<TextBlock Text="{Binding Points}" FontSize="48"
Foreground="SkyBlue"
VerticalAlignment="Top"
HorizontalAlignment="Center"
Width="50"
Visibility="{StaticResource PhoneDarkThemeVisibility}"/>
<StackPanel Grid.Column="1" VerticalAlignment="Top" >
<TextBlock Text="{Binding Label}" TextWrapping="Wrap"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
HorizontalAlignment="Left"
VerticalAlignment="Top" FontSize="{StaticResource PhoneFontSizeMedium}" FontWeight="Bold"
Foreground="{StaticResource PhoneForegroundBrush}"/>
<StackPanel Orientation="Horizontal">
<Image Source="/Assets/Images/List/ic_fine.png" Visibility="{Binding FineVisibility}"
Margin="12,4" />
<TextBlock Text="{Binding FineToView}" TextWrapping="Wrap"
Opacity="0.65" FontSize="{StaticResource PhoneFontSizeNormal}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
HorizontalAlignment="Left"
Foreground="{StaticResource PhoneForegroundBrush}"
VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="/Assets/Images/List/ic_administrative_fine.png" Visibility="{Binding AdministrativeFineVisibility}"
Margin="12,4" />
<TextBlock Text="{Binding AdministrativeFineToView}" TextWrapping="Wrap"
Opacity="0.65" FontSize="{StaticResource PhoneFontSizeNormal}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
VerticalAlignment="Center"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
ListPickerPage.xaml is exact same as in toolkit:
<phone:PhoneApplicationPage
x:Class="BodovySystem.Design.CustomControls.ListPickerPage"
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="PortraitOrLandscape" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True"
shell:SystemTray.BackgroundColor="{StaticResource PhoneChromeColor}"
toolkit:TiltEffect.IsTiltEnabled="True">
<phone:PhoneApplicationPage.Resources>
<Style x:Key="ListBoxItemCheckedStyle" TargetType="ListBoxItem" >
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Margin" Value="-6 0 0 -1"/>
<Setter Property="Padding" Value="12 0 0 0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyLight}"/>
<Setter Property="FontSize" Value="43"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<CheckBox IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected, Mode=TwoWay}"
Content="{TemplateBinding Content}"
x:Name="ContentContainer"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Margin}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Padding="{TemplateBinding Padding}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
<Grid Background="{StaticResource PhoneChromeBrush}" x:Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!-- Header Title -->
<TextBlock
x:Name="HeaderTitle"
Grid.Row="0"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeMedium}"
Foreground="{StaticResource PhoneForegroundBrush}"
Margin="24 12 12 12">
<TextBlock.Projection>
<PlaneProjection RotationX="-90"/>
</TextBlock.Projection>
</TextBlock>
<!-- List of Items -->
<ListBox
x:Name="Picker"
Grid.Row="1"
ItemsSource="{Binding}"
Opacity="0"
toolkit:TiltEffect.IsTiltEnabled="True"
Margin="24 12 0 0"
Tap="OnPickerTapped"/>
</Grid>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="False">
<shell:ApplicationBarIconButton
IconUri="/Toolkit.Content/ApplicationBar.Check.png"
Text="DONE"/>
<shell:ApplicationBarIconButton
IconUri="/Toolkit.Content/ApplicationBar.Cancel.png"
Text="CANCEL"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>
Here is how looks result:
.
