custom control (generic.xaml) for WP7 - windows-phone-7

I am currently following the steps http://www.windowsphonegeek.com/articles/Creating-a-WP7-Custom-Control-in-7-Steps? in doing a custom control for WP7. I have created my control in a normal windows phone Portrait Page xaml file (combining some control), I am not sure how I can convert it to work in generic.xaml file (as ResourceDictionary). So far it didn't work.
I tried to use Expression Blend to do the converting but I am not sure how to do it.
Edit: I am posting my code, it is a box that displays dynamic time. I want also to add properties for providing the Date and another for the color of the box.
This is the code so far.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:local="clr-namespace:CereTime">
<!-- Check xmlns:local im case of error -->
<Style TargetType="local:CereT1">
<!-- After specifing the custom properties in .cs file, implement them here -->
<Setter Property="Date" Value="{TemplateBinding Date}" /> <!-- Under check -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CereT1">
<Canvas Background="YellowGreen" Width="100" Height="100" Name="DateBox" HorizontalAlignment="Left" VerticalAlignment="Top">
<StackPanel Orientation="Vertical" Height="100" Width="100">
<TextBlock Name="Month" Text="Month" Foreground="White" TextAlignment="Center" HorizontalAlignment="Center" FontSize="24" FontWeight="Bold" Margin="0,12,0,0" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,6,0,0">
<TextBlock Name="Date" Text="0" VerticalAlignment="Bottom" Margin="0,0,5,0" FontSize="26.667"/>
<TextBlock Name="No_Name" Text="|" FontSize="26.667" />
<TextBlock Name="Year" Text="Year" Margin="5,0,0,0" FontSize="26.667" />
</StackPanel>
</StackPanel>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Kindly Advise me.
Thanks,

While you can move the style of the user control to a ResourceDictionary, why bother when you can have that and the template in the corresponding XAML for your UserControl?
Simple set the inside MyUserControl.xaml , along with the other properties you wish to change.
But the whole part about separating a style of a custom control to a ResourceDictionary , haven't a awful lot to do with UserControls. Perhaps you should tell us what's really wrong, instead of asking meta-questions.

I had the same problem when trying to create control following to link you give.
Solution is to add
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="themes/generic.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
into Application.Resources tag in App.xaml

Related

Include controls in a ControlTemplate from another .xaml

I want to create a control which displays an image and a watermark (image or something else) on it.
But the watermark should be loaded from another XAML file in order to let people custom the way the watermark will appear : alignment, opacity, size, nature of the watermark (TextBlock, Image, ...).
For instance I could load my watermark with this appearance
<Border BorderThickness="5" BorderBrush="Aqua" Width="50" Height="50">
<Image Source="play.png" />
</Border>
This code is from my Themes/generic.xaml and MyWatermarkControl (inherits from Control) is the class which contain the code of the control (dependency properties).
<Style TargetType="local:MyWatermarkControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MyWatermarkControl">
<Grid>
<Image Source="{TemplateBinding ImagePath}" />
<Image x:name="watermark" Source="play.png" /> <!--I want this to be loaded from another .xaml-->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My search results lead me to add in my ControlTemplate stuff like ContentPresenter, ContentTemplate, DataTemplate : so many results and I cannot understand how do they work but the fact they are nested
You can add a Source property to your MyWatermarkControl then bind the Source property of your embedded Image to this property. For more details see the following tutorial that I wrote:
A Simple Pattern for Creating Re-useable UserControls in WPF / Silverlight

WP7: How to effectively load 100+ small pictures in one view

I am trying to make a long ListBox with each ListBoxItem being a tile with a small 100x100 logo inside it. Right now it's very slow - using more than 5-6 seconds just to become responsive. Since the images are downloaded from the web async (and each one is stored inside each own model instance), I don't know how to check when they have all downloaded either (i.e. no progress indicator to cover the delay).
Do you have any idea as to how I can do this in the most effective way possible?
XAML:
<ListBox>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<ListBoxItem>
<Grid Name="ChannelTile" Tap="ChannelTile_Tap">
<Rectangle Fill="{StaticResource LightGrayColor}" />
<Image Style="{StaticResource Tiles_Image}" Source="{Binding Image}" />
</Grid>
</ListBoxItem>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
If you reference the images in binding (Source={Binding Image}) by URL, try using the LowProfileImageLoader from PhonePerformance (http://nuget.org/packages/PhonePerformance)

How to automatically adjust the size of listboxitem?

I have created a listbox which has a horizontal orientation. When I load the content, in the stackpanel the size of stackpanel will automatically adjust to the size of the content stored inside. How do I achieve this in a listbox?
This is my listboxcode in XAML:
<ListBox Name="WebScrollView"
Grid.Row="2"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
SelectionMode="Multiple"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Height" Value="Auto" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"
VerticalAlignment="Top"
HorizontalAlignment="Center"
/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
WebBrowser is a very expensive control for both CPU and memory. Creating a separate instance of a WebBrowser for each item in a ListBox seems like a bad idea for that reason alone. I suggest that you use the Html Agility Pack to extract the fields you want and bind them into TextBlocks and other controls. You'll also gain much greater control over the display of each item.
http://htmlagilitypack.codeplex.com/

Friends pictures list

I'm developing a Windows Phone 7 app. I'm very new on it.
I've seen here a panorama control with some pictures (at panorama item Samples).
I want to do that but I don't know how.
How can I do that with a listbox and a DataItemTemplate? Or is there any other way to do that?
I will have and XML with a list of URLs. I will add as many images as urls I will have in XML.
But my problem is how can I fill that kind of matrix?
If you don't understand anything, please tell me.
That particular sample is a handcrafted copy of the panorama control.
The easiest way to understand it is probably to download it and take a look - see the source code for that particular pictures section in the "samples" PanoramaItem in http://phone.codeplex.com/SourceControl/changeset/view/55041#820130 - you can see it is done using a ListBox sytled with their style PanoramaImageListBox:
The List Box:
<ListBox x:Name="listBox2"
HorizontalAlignment="Left"
Width="600"
ItemsSource="{Binding Source={StaticResource PicturesLoader}, Path=Pictures}"
Style="{StaticResource PanoramaImageListBox}"
SelectionChanged="listBox_SelectionChanged"/>
The Style:
<Style x:Key="PanoramaImageListBox" TargetType="ListBox">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<my:MultiColumnsPanel Columns="3"
HorizontalAlignment="Left"
VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Image Width="185" Margin="0,0,12,12"
Source="{Binding Bitmap}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
You can see this style uses their own class - MultiColumnPanel - see code at http://phone.codeplex.com/SourceControl/changeset/view/55041#820131

Event to Command in a style

Can someone tell me how to code an event to command in a style for a tabitem? I have no problems using it elsewhere but I can not figure it out for a style.
I am trying to do this in Xaml for WPF using MVVM-Light toolkit.
Here is an example of what I am trying to do:
<DataTemplate x:Key="WorkspacesTemplate">
<igWindows:XamTabControl
AllowTabClosing="True"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding}" TabItemCloseButtonVisibility="Visible"
Margin="4"
Theme="Office2k7Black" >
<igWindows:XamTabControl.Resources>
<Style TargetType="{x:Type igWindows:TabItemEx}"
BasedOn="{StaticResource {x:Type igWindows:TabItemEx}}" >
<Setter Property="Header" Value="{Binding Path=DisplayName}" />
<Style.Triggers>
<i:EventTrigger >
<cmd:EventToCommand Command="{Binding Path=CloseCommand}" />
</i:EventTrigger>
</Style.Triggers>
</Style>
</igWindows:XamTabControl.Resources>
</igWindows:XamTabControl>
</DataTemplate>
I am using an infragistics TabControl but it shouldnt be much different than a regular tab control.
In your example, you don't have an EventName attribute in the EventTrigger element. You need to specify an event on the tab that you want to trigger the command.

Resources