How can I programmatically launch the toolkit datepicker on windows phone 8 - windows-phone-8

I have this peace of code:
<toolkit:DatePicker x:Name="SchedulerDatePicker"
Grid.Column="1"
Background="White"
Foreground="Black"
BorderThickness="0.5,1,0.5,0.5"
BorderBrush="#77797A"
FontSize="18"
Value="">
</toolkit:DatePicker>
<Button Grid.Column="1"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Background="Transparent"
BorderThickness="0"
BorderBrush="Transparent"
Click="CalendarButton_Click">
<Image x:Name="ImageDatePicker"
HorizontalAlignment="Right"
Margin="0,0,0,0"
Style="{StaticResource InfoEllipseImage}"
Source="../../Assets/Icons/datepicker.png">
</Image>
</Button>
All this code is inside a .xaml file in a project on Windows Mobile 8. I need to open the DatePicker 'SchedulerDatePicker' inside 'CalendarButton_Click' in code behind. How to do this? I really don't know...

Take a look at point 6 here.
This looks like what you need. Make a subclass of DatePicker as shown in point 6 of that blog post, use your subclass instead of the original DatePicker, and when you want to open it - call the ClickTemplateButton method. Oh, and don't forget to say thanks to the guy who wrote that blog post. :P
For some reason a method to open the picker was not added to the toolkit. You can take a look at its source code somewhere here.

If you are programatically trying to show the DatePickerPage, you could also invoke the private method to do this in the toolkit. Something like this.
typeof(Microsoft.Phone.Controls.DateTimePickerBase).InvokeMember ("OpenPickerPage", BindingFlags.NonPublic | BindingFlags.Instance | BindingFlags.InvokeMethod, Type.DefaultBinder, this, null);

Related

Create Tab Items and Tab Content dynamically using Orchestra/Catel

I am attempting to create a tabbed interface using Orchestra/Catel. I load the tabs definitions into a TabInfo class. Those work fine - a tabbed interface is created with the correct tab descriptions. In the content for each tab, I want to create a list of buttons - again loaded into a ButtonInfo class. When a tab is selected, the SelectedTab property is used to select the correct list of buttons (ShowButtons).
I have traced the program and when I click on a tab, the correct collection of buttons is in ShowButtons, but nothing shows up in the tab content. I did get this to work in a normal MVVM program, but without the tabs. I used a listview to show my tabs and an ItemsControl to show the buttons.
Belows is my XAML code for the tabs and my SelectedTab logic for pulling the buttons.```
<Grid>
<orccontrols:TabControl LoadTabItems="LazyLoading" ItemsSource="{Binding TabInfo}" SelectedItem="{Binding SelectedTab}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding TabDesc}"/>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding ShowButtons}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding ButtonDesc}"
MinWidth="150"
Height="30"
FontSize="12"
FontWeight="Bold"
Margin="0,15,25,10"
Padding="5,1">
<Button.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding OracleJob}" Value="0">
<Setter Property="Button.Background" Value="DarkSalmon" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</TabControl.ContentTemplate>
</orccontrols:TabControl>
</Grid>
And the code for populating ShowButtons:
public void OnSelectedTabChanged()
{
int _selectTab = SelectedTab.TabKey;
var _showButtons = ButtonInfo.Where(i => i.ButtonTab == _selectTab);
ObservableCollection<ButtonRecord> _btn = new ObservableCollection<ButtonRecord>(_showButtons);
ShowButtons = _btn;
}
Any help is greatly appreciated. I am a beginner with Orchestra/Catel, so I am probably missing the best way to do this.
I recommend to split up the issue from Orchestra / Catel. Orchestra allows you to provide a view as shell, but this view can live on it's own (the only thing Orchestra does is place it inside the correct location inside the shell). By making this problem unrelated to Orchestra, it makes it a bit easier for us to solve.
Next up, I recommend looking into the Catel docs. There is a full example on how to show a shell with tabs with closable tab buttons, see https://docs.catelproject.com/vnext/tips-tricks/mvvm/using-tabbed-interface-with-mvvm/

French/Portuguese Numero character not rendered in XAML properly

I need to display the french and Portuguese Numero character (n.º) in XAML page.
But the underscore under the symbol o is missing while rendering into the XAML page.
Code: <TextBlock FontSize="20" Foreground="Black" Text="Bay n.º"/>
Output: https://i.stack.imgur.com/26Eq9.png
please anyone help me to sort this issue.
Thanks.
Try this:
<TextBlock FontSize="20" Foreground="Black">
<Run Text="Bay n."></Run>
<Run Text="º" TextDecorations="Underline"></Run>
</TextBlock>
You need to underline the character that you want to display, in XAML there are certain combinations that you can only do them with the Run or by code.
Or you can try something like this:
<TextBlock FontSize="20" Foreground="Black" Text="Bay n.№"/>
However, I strongly suggest the first option.
More examples:
https://raviranjankr.wordpress.com/2014/02/27/how-to-format-texts-of-textblock-using-xaml-in-windows-phone/
In this example they do it with C# code, you can try it as a possible alternative.
https://social.msdn.microsoft.com/Forums/en-US/915740e9-a693-40b9-96a4-07d2784d3b53/textblock-underline-in-winrt?forum=winappswithcsharp

Items being reordered in LongListSelector

In my WP8 app, I'm using LongListSelector to display data items. Grouping works, jump list works.
I have the usual master/detail scenario here - click on item in the list, new page shows up with more information.
The problem is with navigating back to the page with LongListSelector. The list is basically messed up - items are randomly reordered, even between groups. Clicking on an item works properly - ShowItemInfo receives view model for the item the user clicked on.
Previously I was using ListBox, which too suffered from this issue. But I could disable virtualization by using default StackPanel as items panel. I don't know how to disable virtualization on LongListSelector (I don't want to, but the bug is horrible).
View model is simple. I'm using Caliburn.Micro, its conventions and BindableCollection for list of groups. I populate the list just once with AddRange method.
When the page is navigated back to, I'm not doing anything - and I even can't since I use MVVM and Caliburn.Micro. The items are loaded into list in OnInitialize callback, which is invoked only once during lifetime of view model.
The XAML for view is this:
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.Resources>
<phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
<phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>
<Style x:Key="ListJumpListStyle" TargetType="phone:LongListSelector">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="{Binding Converter={StaticResource BackgroundConverter}}"
HorizontalAlignment="Stretch">
<TextBlock Text="{Binding GroupTitle}"
Foreground="{Binding Converter={StaticResource ForegroundConverter}}" />
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<phone:LongListSelector x:Name="Items" LayoutMode="List" IsGroupingEnabled="True"
JumpListStyle="{StaticResource ListJumpListStyle}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid cal:Bind.Model="{Binding}"
cal:Message.Attach="[Event Tap] = [ShowItemInfo($dataContext)]"
Background="Transparent">
<TextBlock x:Name="ItemText" Style="{StaticResource PhoneTextTitle2Style}" />
</Grid>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
<phone:LongListSelector.GroupHeaderTemplate>
<DataTemplate>
<Border>
<TextBlock Text="{Binding GroupTitle}" />
</Border>
</DataTemplate>
</phone:LongListSelector.GroupHeaderTemplate>
</phone:LongListSelector>
</Grid>
I've narrowed down the issue to the data template, more specifically the attached property Bind.Model, which allows Caliburn.Micro to bind view model to view:
<DataTemplate>
<Grid cal:Bind.Model="{Binding}"
cal:Message.Attach="[Event Tap] = [ShowItemInfo($dataContext)]"
Background="Transparent">
<TextBlock x:Name="ItemText" Style="{StaticResource PhoneTextTitle2Style}" />
</Grid>
</DataTemplate>
When this view is changed to use explicit bindings instead conventions (and Bind.Model attached property is removed), LongListSelector works like a charm.
I believe there has to be a bug within Caliburn.Micro, which causes this issue. Initially, I thought the bug was in the 1.5.2 version, which I'm using (unfortunately I have to), and that it was fixed in new 2.x versions. However, that is not true, the bug is still manifesting in latest stable version 2.0.2.
I was using this technique in WPF without any problems. I've also tried running the app in emulators for WP8.0 and WP8.1, but the behavior is the same.
If anybody finds out, what causes this bug (or new version of Caliburn.Micro fixes it), feel free to edit answer or post a comment. I would be happy to use conventions in data templates again.
My mistake: for data templates, Bind.ModelWithoutContext should be used. Even documentation explicitly says so:
Bind.ModelWithoutContext - View-First - Set’s the Action.Target to the specified instance. Applies conventions to the view. (Use inside
of DataTemplate.)
With Bind.ModelWithoutContext LongListSelector works properly as it should (with conventions in item template).

How to edit ExpandableContentTemplate in Blend

I'm using Telerik RadExpanderControl in my Wp8 app. I open the project in Blend, right-click the RadExpanderControl under Objects and Timeline, select Edit Additional Templates. Here my options are Edit Generated Content (ContentTemplate), Edit AnimatedIndicatorContentTemplate and Edit ExpandedStateContentTemplate.
None of these actually provide me access to the ExpandableContentTemplate which is what I need.
Am I missing something?
Unfortunately, is isn't available as an extractable template. However you can do this to create one:
<telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
<DataTemplate>
<StackPanel Margin="24, 4, 4, 4" Orientation="Horizontal">
<TextBlock
FontSize="{StaticResource PhoneFontSizeExtraLarge}"
FontFamily="{StaticResource PhoneFontFamilyLight}"
Text="{Binding TextYouWantToBind}"
VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
A workaround that I do when I need to use Blend to style the ExpandableContentTemplate is to style the DataTemplate of the (Generated)ContentTemplate to my liking, then copy paste it into the DataTemplate of the ExpandablecontentTemplate.
I have reported this to the windows Phone Team

How to free memory hold by images in data template in windows phone 8 App?

I have a longlistselector for which I have a data template that defines the type of items to be added to the list. The data template has an Image control whose source is binded with path dynamically, thus each item in list has an associated Image Control. The problem I face is that these Image control never free the memory they occcupy resulting in out of memory exception. On normal scenario I set bitmapImage.UriSource=null to deallocate the memory associated with the bitmap But can't find a way to do so in this scenario. Here is the xaml code for the longlistselector and the data template associated with it..
Data Template
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="MediaItemTemplate">
<Canvas VerticalAlignment="Top">
<Border BorderBrush="#FF4791CA" BorderThickness="3">
<Image Height="100" Width="100" VerticalAlignment="Top" Grid.RowSpan="2" Stretch="UniformToFill">
<Image.Source>
<BitmapImage UriSource="{Binding path}" CreateOptions="BackgroundCreation" DecodePixelHeight="50" DecodePixelWidth="50"/>
</Image.Source>
</Image>
</Border>
<Image Source="/Icons/check.png" Height="16" Width="16" Grid.Row="0" Grid.Column="0" VerticalAlignment="Top" Margin="80,7,7,0" Canvas.ZIndex="100" OpacityMask="Black" Visibility="{Binding visibility}" Name="checkImage" >
</Image>
</Canvas>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
LonglistSelector
<phone:LongListSelector
Tap="ListMedia_Tap"
x:Name="ListMedia"
HorizontalAlignment="Left"
Height="624"
VerticalAlignment="Top"
Width="436"
Background="Transparent"
ItemTemplate="{StaticResource MediaItemTemplate}"
LayoutMode="Grid" GridCellSize="120,120"/>
I am very new to windows phone programming, What basically I want to do is to develop kind of image browser experience. Please Help me out with ways to deallocate the memory. In case I am doing it completely wrong please correct me or suggest better ways to achieve the same functionality. Thanx in advance...
A solution I've found to handle this case is making a custom control to automatically set the urisource to null:
public class SafePicture : System.Windows.Controls.ContentControl
{
public SafePicture()
{
this.Unloaded += this.SafePictureUnloaded;
}
private void SafePictureUnloaded(object sender, System.Windows.RoutedEventArgs e)
{
var image = this.Content as System.Windows.Controls.Image;
if (image != null)
{
image.Source = null;
}
}
}
Then, just wrap all your pictures in that control:
<my:SafePicture>
<Image Source="{Binding Path=path}" />
</my:SafePicture>
By default Windows Phone stores messages downloaded from a Uri in memory to save having to load them again. (It's a crude form of caching.)
To free the memory used by these images you needed to explicitly free all references to them. See MSDN: Image Tips for Windows Phone 7 for more details
When scrolling with your code (without using Loaded), then images are lost after scrolling down and returning to the top of the list (speed no matter). While using Loaded, scrolling wokrs okay: it is possible to scroll down and return to the top, (debugger shows that Unloaded and Loaded are called), and images are there. However, when moving to another page (i have master-detail pages), they are mixed up.