I'm trying to activate a state when the screen is loaded but it doesn't work.
What I do is, I go to the screen, right click the LayoutRoot and then go "Activate State" and I pick my state. Then when I click on this newly generated [ActivateStateAction] I change the EventName from MouseLeftButtonDown to Loaded. However, it doesn't seem to work. The MouseLeftButtonDown works but not the Loaded. I tried this on multiple screens (not just the startup screen) but it still doesn't work, any ideas?
I had the same problem.
I found out the ActivateStateAction Loaded, was only called for my first screen. Similar actions on other screens which I then navigated to weren't calling the Loaded event.
I changed my ActivateStateAction to use to Layout Updated action on all screen but the first. This event is fired when a new screen updates the layout and now my problem is fixed.
I repeated the steps you gave and it worked for me. You didn't mention SL or WPF, so I tried it in Silverlight. Maybe check the properties of the activatestateaction to be sure the target state name is correct. Let me know if you still can't get it working and I can try to help find the problem (post your xaml). Here is the xaml generated by my actions:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:pb="clr-namespace:Microsoft.Expression.Prototyping.Behavior;assembly=Microsoft.Expression.Prototyping.Interactivity"
x:Class="SilverlightPrototype2Screens.Screen_1"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="White">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<pb:ActivateStateAction TargetScreen="SilverlightPrototype2Screens.Screen_1" TargetState="VisualState"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="VisualState">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="Red"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="rectangle" Fill="White" Stroke="Black" Height="74" HorizontalAlignment="Left" Margin="171,116,0,0" VerticalAlignment="Top" Width="107" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
Related
I need to support validation on some standard AutoSuggestBox control. So my idea was to customize AutoSuggestBox control by changing it's TextBox to ValidatingTextBox (my implementation of ValidatingTextBox by James Croft). Is that even possible? If yes - how, and if not - what is the alternative?
So my idea was to customize AutoSuggestBox control by changing it's TextBox to ValidatingTextBox
It is not recommended replacing the TextBox of AutoSuggestBox. Some default functionalities might fail because of that. Instead, you can add some function to it. And WinRTXamlToolkit offers a great validation extension to TextBox control.
You can apply this extension to AutoSuggestBox by following steps:
Reference WinRTXamlToolkit in your project. Add reference of WinRTXamlToolkit.Controls.Extensions in your XAML page like below:
<Page
...
xmlns:extensions="using:WinRTXamlToolkit.Controls.Extensions"
...>
Create a copy of your AutoSuggestBox control's style template with Visual Studio. Or you can copy the template from here, and apply it to your AutoSuggestBox control.
Find the TextBox Control in the template. Add extensions:FieldValidationExtensions.Format="the format you need" to it like below:
<TextBox extensions:FieldValidationExtensions.Format="Numeric"
x:Name="TextBox" ScrollViewer.BringIntoViewOnFocusChange="False" DesiredCandidateWindowAlignment="BottomEdge" Header="{TemplateBinding Header}" Margin="0" PlaceholderText="{TemplateBinding PlaceholderText}" Style="{TemplateBinding TextBoxStyle}" Width="{TemplateBinding Width}" Canvas.ZIndex="0"/>
If you want to show validation error message. You can change the panel of this TextBox from Grid to StackPanel and add a TextBlock like below:
<StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Orientation">
<VisualState x:Name="Landscape"/>
<VisualState x:Name="Portrait"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBox extensions:FieldValidationExtensions.Format="Numeric"
x:Name="TextBox" ScrollViewer.BringIntoViewOnFocusChange="False" DesiredCandidateWindowAlignment="BottomEdge" Header="{TemplateBinding Header}" Margin="0" PlaceholderText="{TemplateBinding PlaceholderText}" Style="{TemplateBinding TextBoxStyle}" Width="{TemplateBinding Width}" Canvas.ZIndex="0"/>
<TextBlock Text="{Binding (extensions:FieldValidationExtensions.ValidationMessage), ElementName=TextBox}"
Visibility="{Binding (extensions:FieldValidationExtensions.ValidationMessageVisibility), ElementName=TextBox}" />
...
</StackPanel>
Now you get a basic validatingAutoSuggestBox ready for use.
How I can get behavior of form in windows Phone like Settings >> Mobile Network >> EditAPN. In this page it have many textboxes in scrollviewer. When user taps on any textbox and its get focus then the page scrolls up and header remains constant and SIP keyboard shown. And when user lost the focus from this text box then page comes to its normal state and SIP keyboard hides and header remains unchanged. I want to achieve this behavior. I searched a lot but did not get any solution.
Strange to see scrollviewer behavior in WP7.
Any help will be great and appreciable.
Thanks in advance.
Note: If there is any tricky solution, please provide sample code.
Here is my sample code.
<Grid x:Name="ContentPanel" Grid.Row="1" >
<ScrollViewer x:Name="Scroller">
<StackPanel Orientation="Vertical">
<TextBlock Text="Name"/>
<TextBox x:Name="txtName" />
<TextBlock Text="Email"/>
<TextBox x:Name="txtEmail"/>
<TextBlock Text="Phone"/>
<TextBox x:Name="txtPhone" />
<TextBlock Text="Adress"/>
<TextBox x:Name="txtAddress" />
</StackPanel>
</ScrollViewer>
</Grid>
When I try to scroll down, it does not move down fully and seems to be worked as elastic.
Edit:
This example, I have already seen and not useful in my case. I have 4 textboxes and my focus is on first textbox and keypad comes and hide last textbox. If user wants to go to last textbox and wants to enter input, it does not scroll fully and works as elastic. For this user has to press on some other part of screen, then he enter in last box. I saw in WP7 app in Settings -> Mobile Network -> EditAPN. There are 4-5 text boxes and these scroll perfectly. Don't know Which control or workaround MSFT used.
Maybe I am wrong, but why not using a simple grid and a listpicker control. You will need the Windows Phone Toolkit for this (Nuget Here).
The first Row of the grid contains the Header and will not change.
The second Row contains what you want (scrollview, listpicker, ...)
Here is a very basic example :
<phone:PhoneApplicationPage
x:Class="PhoneApp3.MainPage"
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"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="PageTitle" Text="MY HEADER" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1">
<toolkit:ListPicker>
<toolkit:ListPickerItem Content="aaa" />
<toolkit:ListPickerItem Content="bbb" />
<toolkit:ListPickerItem Content="ccc" />
</toolkit:ListPicker>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Edit :
When SIP keyboard is rendered, PhoneApplicationFrame.TranslateTransform.Y is set to specific values (-259 in landscape orientation, -339 in portrait orientation). To update layout, we’ll just set top margin to the specified value(-s) and after that Silverlight layout system will fix the issue.
This example may help you.
I have a design issue with my listbox on my view.
Currently it has following DataTemplate as ItemTemplate:
<DataTemplate x:Key="MovieItemTemplate">
<StackPanel>
<Border BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="5" Margin="3" Height="215" Width="140">
<Image x:Name="MovieCover"
toolkit:TiltEffect.IsTiltEnabled="True"
Margin="0"
HorizontalAlignment="Center"
Width="140"
Height="210">
<Image.Source>
<BitmapImage UriSource="{Binding Cover}" CreateOptions="BackgroundCreation"/>
</Image.Source>
<interactivity:Interaction.Triggers>
<interactivity:EventTrigger EventName="Tap">
<gsextra:EventToCommand Command="{Binding MainViewModel.MovieItemSelectedCommand, Source={StaticResource Locator}}"
PassEventArgsToCommand="True"
CommandParameter="{Binding MovieID}"
></gsextra:EventToCommand>
</interactivity:EventTrigger>
</interactivity:Interaction.Triggers>
</Image>
</Border>
</StackPanel>
</DataTemplate>
So as you can see, I have an image inside it that will download his content from the internet through an URI. Thanks to the new mango option BackgroundCreation ( cfr. http://blogs.msdn.com/b/slmperf/archive/2011/06/13/off-thread-decoding-of-images-on-mango-how-it-impacts-you-application.aspx ) it load in background.
But I have a very large collection and even though I do 'paged' binding of the Listbox Source, I notice my memory keeps on going up, until it has consumed everything and the app crashes.
Then, I noticed this http://blog.wpfwonderland.com/2011/01/17/images-and-memory-leaks-in-windows-phone-7/ so it would seem I need to cleanup the image itself, because of the image caching feature in wp7.
When I do this, everything works great in reference to memory, BUT now each time the user 'pages' through the listbox the images need to be redownloaded, resulting in an app that is almost not usable... because the user keeps on waiting for those images.
Any tips/tricks on how to go about this?
I also tried the DefferedLoadListBox
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
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.