Set ItemsPanelTemplate to dynamically created ListBox in WP8 - windows-phone-8

I have a ListBox control in WP8
<ListBox>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Height="120" Width="410" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem Margin="0,0,20,0" Width="120" Height="120" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
ListBoxItem 1
</ListBoxItem>
<ListBoxItem Margin="0,0,20,0" Width="120" Height="120" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
ListBoxItem 2
</ListBoxItem>
<ListBoxItem Margin="0,0,10,0" Width="120" Height="120" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
ListBoxItem 3
</ListBoxItem>
</ListBox>
Now I have to add this ListBox at runtime. I can manage to add ListBoxItems but not able to set the ItemsPanelTemplate. Please help.

ListBox lb = new ListBox();
ItemsPanelTemplate ddd = new ItemsPanelTemplate();
lb.ItemTemplate = ddd;
Everything in xaml is classes. Remember it.

Related

Windows Phone 8.1 - Creating template and using it in many places?

I have a scenario where I need to create template and use it in many places.
for example :
<Grid VerticalAlignment="Top" Background="White">
<TextBlock Foreground="Black" FontSize="24" FontWeight="SemiBold" Margin="12 12 12 6"/>
<Border Background="DarkGray" HorizontalAlignment="Left" Height="2" Width="170" Margin="12 0 0 12"/>
<Border Background="DarkGray" HorizontalAlignment="Right" Height="2" Width="170" Margin="12 0 0 12"/>
I tried some thing like this:
<ContentPresenter x:Key="specificationTemplate1">
<Grid VerticalAlignment="Top" Background="White">
<TextBlock Foreground="Black" FontSize="24" FontWeight="SemiBold" Margin="12 12 12 6"/>
<Border Background="DarkGray" HorizontalAlignment="Left" Height="2" Width="170" Margin="12 0 0 12"/>
<Border Background="DarkGray" HorizontalAlignment="Right" Height="2" Width="170" Margin="12 0 0 12"/>
</Grid>
</ContentPresenter>
Grid grdSpecificationTemplate = (App.Current.Resources["specificationTemplate1"] as ContentPresenter).Content as Grid;
MainGird.Children.Add(grdSpecificationTemplate);
The problem I am facing is, first time it is working fine and when I go back and navigate again it's throwing exception "The element is already a child of another element".
Please suggest me Is it a right way to do or Is there any other way.
PS : I want to create some hundred templates like this, so I can't go with User Control.
Thanks in advance.
There is an easier way. Define your "template" as a ControlTeplate:
<ControlTemplate x:Key="specificationTemplate1">
<Grid VerticalAlignment="Top" Background="White">
<TextBlock Foreground="Black" FontSize="24" FontWeight="SemiBold" Margin="12 12 12 6"/>
<Border Background="DarkGray" HorizontalAlignment="Left" Height="2" Width="170" Margin="12 0 0 12"/>
<Border Background="DarkGray" HorizontalAlignment="Right" Height="2" Width="170" Margin="12 0 0 12"/>
</Grid>
</ControlTemplate>
You can simply use it as a ContentControl
<ContentControl Template="{StaticResource specificationTemplate1" />
Or on code
var c = new ContentControl
{
Template = (ControlTemplate)App.Current.Resources["specificationTemplate1"]
}

Why am I being told a class does not exist in my namespace when it does?

I am trying to follow the article here to add a custom control to my project so that I can call it ("promptForPhotosetName") like so:
Popup popTart = new Popup();
popTart.Child = new promptForPhotosetName();
popTart.IsOpen = true;
I added a Custom Control to my project based on Templated Control.
My custom control class (which IS in the Photrax namespace) contains this constructor:
public promptForPhotosetName()
{
this.DefaultStyleKey = typeof(promptForPhotosetName);
}
I have this in \Themes\Generic.xaml, which is the other file (along with promptForPhotsetName.cs) that was created when I added the Custom Control:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Photrax">
<Style TargetType="local:promptForPhotosetName">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:promptForPhotosetName">
<StackPanel Orientation="Vertical">
<ListBox >
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<Image Source="Windows 8.jpg" Height="200" Width="300" Stretch="Fill"></Image>
<Image Source="Windows_8.jpg" Height="200" Width="300" Stretch="Fill"></Image>
<Image Source="windows8(1).jpg" Height="200" Width="300" Stretch="Fill">
</Image>
</StackPanel>
</ListBoxItem>
</ListBox>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Yet I get this error: The name "promptForPhotosetName" does not exist in the namespace "using:Photrax"." on both this line of XAML:
<Style TargetType="local:promptForPhotosetName">
...and this one:
<ControlTemplate TargetType="local:promptForPhotosetName">
Why? The class promptForPhotosetName IS indeed in the Photrax namespace!
Sounds like just the design tools error. Rebuilding the project should make the designer recognize the types it hasn't seen before.

Adding image to title of Pivot page and handling touch

I am trying to add image next to pivot control title and I want to be able to touch it. But I can't and I guess it's because pivot is handling touches. This is my code:
<Grid Margin="162,22,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"
Tap="MessagesIcon_OnTap">
<Image Source="/Assets/Images/Icons/messages_icon.png"
x:Name="MessagesIcon"
Stretch="Fill" Opacity="1" Width="20" Height="22"
Tap="MessagesIcon_OnTap"/>
</Grid>
<phone:Pivot x:Name="PlayerPivot" Title="TITLE" >
<!--Pivot item one-->
<phone:PivotItem Margin="0" x:Name="PlayingPivotItem">
<phone:PivotItem.Header>
<TextBlock Text="subtitle" />
</phone:PivotItem.Header>
<Grid x:Name="ContentPanel">
...
As you can see I tried catch tap on both (grid which contains image and image it self) but it isn't call. What is the easiest way to get tap gesture on image? Thanks
Give a try using this snippet:
<controls:Pivot.Title>
<StackPanel>
<TextBlock Text="title" />
<Image Source="/Images/anyimage.png"/>
</StackPanel>
</controls:Pivot.Title>

how to Switch ListBox DataTemplate orientation between Vertical and Horizontal on buttonClick from Appbar in windows phone 8

I have a Images page images are loading from my random urls into my ListBox, I have ApplicationBar in this page and i have created two buttons one for library page show in grid format and Second for library page in list format, by default my Library View in Grid format now i want to show its view in the list format by clicking a button from the application bar.
I have tried the converters to convert the orientation of my ListBox's stackPanel but not worked.
I have tried the change the orientation by fetching the x:Name property of the ListBox but not worked.
i searched on google by putting following query but not found proper solution.
"How to Switch ListBox DataTemplate orientation between Vertical and Horizontal on buttonClick from Appbar in windows phone 8"
I am showing my ListBoxPage.xaml.
<ListBox Name="listCloudBooks" Visibility="Visible" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Auto" FontFamily="Segoe UI" FontStyle="Normal" FontWeight="Thin" Margin="0,0,0,50">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<tools:WrapPanel Orientation="Horizontal">
</tools:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" Background="#151414" CornerRadius="3" Margin="3" Width="150" TextOptions.DisplayColorEmoji="True" BorderBrush="#1c1b1b">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Image x:Name="imgBookImage" Source="{Binding CLover}" Visibility="Visible" VerticalAlignment="Top" HorizontalAlignment="Center"
Width="80" Height="100"/>
<StackPanel Orientation="Horizontal">
<TextBlock Visibility="{Binding IsVisible}" Text="{Binding prgo}" FontFamily="Segoe UI" FontSize="18" FontWeight="ExtraBold" Foreground="White" Margin="5,0"></TextBlock>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding FName}" FontFamily="Segoe UI" FontSize="13.5"
Foreground="White" TextTrimming="WordEllipsis"
VerticalAlignment="Top" HorizontalAlignment="Left"
TextWrapping="Wrap"
Width="300" Padding="2"/>
<TextBlock Text="{Binding LName}" FontSize="13.5" FontFamily="Segoe UI"
Foreground="White"
VerticalAlignment="Top" HorizontalAlignment="Left"
TextWrapping="Wrap"
Width="300" Padding="2"/>
<ProgressBar x:Name="downloadProgressBar" Foreground="Green" IsIndeterminate="True" VerticalAlignment="Center" Width="120" TextOptions.TextHintingMode="Animated" Visibility="{Binding IsVisible}" CharacterSpacing="2"/>
<Button Content="Hello" x:Name="btnDownload" IsEnabled="{Binding IsEnableButton,
Click="btnDownload_Click" Tag="{Binding}" Width="120" BorderThickness="1" FontSize="13.5" Margin="0,5"
FontFamily="Segoe UI" tools:SlideInEffect.LineIndex="2" HorizontalAlignment="Left" VerticalAlignment="Top"
Foreground="White">
</Button>
<Image x:Name="imgCancelImage" Source="/Assets/Tiles/CancelImage.png" HorizontalAlignment="Right" Width="25" Height="25" Tag="{Binding}"/>
<Button x:Name="btnDeleteBook" Click="btnDeleteBook_Click"
Tag="{Binding}" BorderThickness="1" Margin="97,-66,0,0"
Height="55" Width="55"
<Button.Background>
<ImageBrush ImageSource="/Images/delete.png" Stretch="Fill"></ImageBrush>
</Button.Background>
</Button>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
If you have any idea how can we do that than please let me know.
I have found the alternate solution of it, what i am doing i have created two ListBox with different Name Property and made the visibility="Collapsed" and Orientation="Horizontal". And in second ListBox i created with different Name and Visibility Property="Visible" and assigned the orientation="Vertical".
So on btnList i am playing with Visibility only.

Change windows phone toolkit pushpin content

How to change the content of toolkit pushpin via program dynamically?
I've put several pushpins on the maps on the initializing, and I want to change the content of the pushpin while user put a tap on it.
This is my xaml code:
<toolkit:MapExtensions.Children>
<toolkit:MapItemsControl x:Name="MapItems">
<toolkit:MapItemsControl.ItemTemplate>
<DataTemplate>
<toolkit:Pushpin GeoCoordinate="{Binding Coordinate}" Tap="PinOnTap">
<toolkit:Pushpin.Template>
<ControlTemplate TargetType="toolkit:Pushpin">
<StackPanel>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" Content="{TemplateBinding Content}" />
<Path Data="M0,0 L0,1 L1,0" Fill="{TemplateBinding Background}" Stretch="Fill" Margin="32,0" Height="12" Width="18"
Visibility="{Binding Content.Visibility, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="Left" />
<Image Source="{Binding Icon_img}" Stretch="None" HorizontalAlignment="Left"/>
</StackPanel>
</ControlTemplate>
</toolkit:Pushpin.Template>
<Border Background="White" Visibility="Collapsed" Width="200" HorizontalAlignment="Center" >
<StackPanel Orientation="Horizontal" Tap="gotoProfileFromPin">
<Image Margin="8" Source="{Binding Image}" VerticalAlignment="Top" Width="50" Height="50" />
<StackPanel>
<TextBlock Text="{Binding Uid}" Visibility="Collapsed"/>
</StackPanel>
</StackPanel>
</Border>
</toolkit:Pushpin>
</DataTemplate>
</toolkit:MapItemsControl.ItemTemplate>
</toolkit:MapItemsControl>
</toolkit:MapExtensions.Children>
And my program.cs:
private void PinOnTap(object sender, System.Windows.Input.GestureEventArgs e)
{
var popOut = ((sender as Pushpin).Content) as Border;
popOut.Visibility = System.Windows.Visibility.Visible;
var popOutImg = (popOutNew.Child as StackPanel).DataContext;
var popUser = popOutImg as UserPin;
// function to get the images by Uid
popUser.Image = new Uri(images fetch from function, UriKind.RelativeOrAbsolute);
popOutNew.Child.UpdateLayout();
e.Handled = true;
}
In PinOnTap function, I'll fetch a picture from another function and show it on the maps as toolkit:Pushpin.Content, However it can't work.
This code:
popUser.Image = new Uri(images fetch from function, UriKind.RelativeOrAbsolute);
it only change the Image source but not update the UI.
I print it's value and it source has been changed, but I donno why it didn't appear on the map (the map only show the "Border" with white background and didn't have any image inside it)
I think You will have to Implement INotifyPropertyChange as th change is not reflected on Xaml .