Code behind for event Fire on Mainpage rather than UserControl - windows-phone-7

I have an UserControl which has listbox. I put this UserControl on the Mainpage.xaml. I would like to handl the selected and button click event on Mainpage.xaml.cs rather than on usercontrol.xaml.cs because I will use this UserControl to another page and the respond will be different. How can I do it? Would you provide example or link to me? Thanks in advance.
There is my UserControl:
<UserControl x:Class="CMSPhoneApp.QueueListControl"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480"
xmlns:local="clr-namespace:CMSPhoneApp" >
<UserControl.Resources>
<Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer">
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ScrollStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Scrolling">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalScrollBar"/>
</Storyboard>
</VisualState>
<VisualState x:Name="NotScrolling"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="{TemplateBinding Padding}">
<ScrollContentPresenter x:Name="ScrollContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>
<ScrollBar x:Name="VerticalScrollBar" HorizontalAlignment="Right" Height="Auto" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Opacity="0" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" VerticalAlignment="Stretch" Width="5" BorderBrush="#FF2022BC"/>
<ScrollBar x:Name="HorizontalScrollBar" HorizontalAlignment="Stretch" Height="5" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Opacity="0" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}" VerticalAlignment="Bottom" Width="Auto"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<local:VisibilityConverter x:Key="VisibilityConverter"/>
<local:ColumSpanConverter x:Key="ColumSpanConverter"/>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer Style="{StaticResource ScrollViewerStyle1}" Background="#00E23162">
<ListBox x:Name="lstCall" HorizontalAlignment="Left" Margin="6,6,0,0" VerticalAlignment="Top" Width="400" SelectionChanged="lstCall_SelectionChanged" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="grdQueue" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition Width="100*"/>
<ColumnDefinition Width="125" />
</Grid.ColumnDefinitions>
<Image Source="{Binding Type}" Grid.Row="0" Grid.Column="0"/>
<TextBlock Grid.Row="0" Grid.Column="1" Grid.ColumnSpan= "{Binding isSpan, Converter={StaticResource ColumSpanConverter}}" Text="{Binding summary}" TextWrapping="Wrap"
Style="{StaticResource PhoneTextAccentStyle}" />
<Button Grid.Row="0" Grid.Column="3" ClickMode="Press" Click="Action_Click" Style="{StaticResource ButtonStyle1}"
Visibility="{Binding isVisibility, Converter={StaticResource VisibilityConverter}}">
<Button.Content>
<TextBlock Width="85" Height="70" Text="{Binding ActionCaption}"
Style="{StaticResource LabelStyle_20}" />
</Button.Content>
</Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
</Grid>
</UserControl>
There is the code to add the UserControl on Mainpage.xaml:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<my:QueueListControl />
</StackPanel>
</Grid>
</Grid>
I am able to bind the data on the lst on MainPage.xaml.cs by the following code:
MyQueue = new List<QueueItem>();
MyQueue.Add(new QueueItem { summary = "Test1tqeewwewew332233 3233322323 wdqwqwqwqwq", status = "Open", callNumber = "1" });
MyQueue.Add(new QueueItem { summary = "Test1tqeewwewew332233 3233322323 wdqwqwqwqwq", status = "Responded", callNumber = "2" });
MyQueue.Add(new QueueItem { summary = "Test1tqeewwewew332233 3233322323 wdqwqwqwqwq", status = "Resolved", callNumber = "3" });
MyQueue.Add(new QueueItem { summary = "Test1tqeewwewew332233 3233322323 wdqwqwqwqwq", status = "transfer", callNumber = "4" });
MyQueue.Add(new QueueItem { summary = "Test1tqeewwewew332233 3233322323 wdqwqwqwqwq", status = "Complete", callNumber = "5" });
test.lst.ItemsSource = MyQueue;

One solution is to use a library such as MVVM Light; it has a Messenger class (tutorial) that you can use to send messages from the UserControl's code behind.
In the MainPage's OnNavigatedTo method register for the UserControl's message and in the 'OnNavigatedFrom` method un-register from listening to the message. You can do the same in the other page where you want to use this UserControl.
The message fired by the UserControl must contain all the relevant information needed for either class to react to it appropriately. Thus, you can keep the control's code-behind decoupled from user interaction logic.

You need to make your UserControl more re-useable by exposing its state and events so that these can be updated / handled by controls that host an instance of your control. See this tutorial for details:
A Simple Pattern for Creating Re-useable UserControls in WPF / Silverlight

Related

How to change default selected focused background color in ListView in UWP?

I am working on windows universal app. I want to change my list view selected background color.The system default selected background color is blue and i need a gray color.I used a data template for binding data to listview.
Code
Datatemplate
<Page.Resources>
<DataTemplate x:Name="datatemplate1" x:DataType="data:storedata">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="{x:Bind name}"
x:Phase="1"
x:Name="product_name_layout"
Style="{ThemeResource BaseTextBlockStyle}"
TextWrapping="NoWrap"
Foreground="#FF080808"
Margin="2,3,0,0"
FontSize="12"
/>
<TextBlock x:Name="status_title_layout" FontSize="12" Foreground="Gray" Style="{ThemeResource BaseTextBlockStyle}" Visibility="Visible" SelectionHighlightColor="#FFB1B4BE" Margin="2,5,0,0" Text="SKU:" Grid.Column="1" Grid.Row="1"></TextBlock>
<TextBlock Grid.Column="1"
Grid.Row="0"
Text="{x:Bind status}"
x:Phase="2"
Foreground="Gray"
FontSize="12"
Style="{ThemeResource BaseTextBlockStyle}"
Margin="32,5,0,0"
x:Name="sku_layout"/>
</Grid>
</DataTemplate>
</Page.Resources>
ListView:
<ListView x:Name="MasterListView"
UseLayoutRounding="False"
ScrollViewer.VerticalScrollMode="Enabled"
BorderBrush="#FFA70EAA"
SelectionChanged="OnSelectionChanged"
IsItemClickEnabled="True"
ShowsScrollingPlaceholders="False"
ItemTemplate="{StaticResource datatemplate1 }"
ItemClick="OnItemClick"
Grid.Column="0"
Grid.Row="1"
>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
I also Put some Screen shot so you can easily understand.
Image
Add to your ListViewItem's style this template:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
ContentTransitions="{TemplateBinding ContentTransitions}"
SelectionCheckMarkVisualEnabled="True"
CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
SelectedBackground="{ThemeResource SystemControlHighlightListAccentLowBrush}"
SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}"
PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
ContentMargin="{TemplateBinding Padding}"
CheckMode="Inline"/>
</ControlTemplate>
</Setter.Value>
</Setter>
Here you can delete or modify what you want, it looks like you want to change SelectedBackground color to DarkGrey.

How to Design Grid view which is responsive for all view in UWP?

I am working on windows Universal platform(Universal app-UWP). I have issue regarding Responsiveness of the Grid Control. How to design a grid which is responsive for all view. I am designed a grid this way:
Code:
<ListView Margin="30,0,0,1" MaxHeight="160" Visibility="Visible" ScrollViewer.VerticalScrollMode="Enabled" Name="lstAssociatedProduct" Grid.Row="1" Grid.Column="0" BorderThickness="0" BorderBrush="#FFA79E9E" UseLayoutRounding="False" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#FFF4F4F4"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="myback" Background="Transparent">
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="0,0,0,0"/>
<Setter Property="Margin" Value="0,-10,0,-10"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.HeaderTemplate>
<DataTemplate>
<Grid x:Name="grdAssociateTitle" MinWidth="700" HorizontalAlignment="Left" Margin="5,0,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250*"></ColumnDefinition>
<ColumnDefinition Width="100*"></ColumnDefinition>
<ColumnDefinition Width="50*"></ColumnDefinition>
<ColumnDefinition Width="50*"></ColumnDefinition>
<ColumnDefinition x:Name="clmStatus" Width="150*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" x:Name="name_title_detail" Text="Name" HorizontalAlignment="Stretch" Foreground="#FF020202" FontWeight="Bold" Margin="0"></TextBlock>
<TextBlock Grid.Column="1" x:Name="sku_title_detail" Text="Surname" HorizontalAlignment="Left" Foreground="#FF040404" FontWeight="Bold"></TextBlock>
<TextBlock Grid.Column="2" x:Name="qty_title_detail" Text="Age" Foreground="#FF080808" HorizontalAlignment="Left" FontWeight="Bold"></TextBlock>
<TextBlock x:Name="txtAcPriceTitle" Grid.Column="3" Text="City" Margin="0,0,0,0" Foreground="#FF080808" HorizontalAlignment="Left" FontWeight="Bold"></TextBlock>
<TextBlock Grid.Column="4" Text="Status" x:Name="Address" Foreground="#FF080808" HorizontalAlignment="Left" FontWeight="Bold"></TextBlock>
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="5,5,0,0" x:Name="grdAssociateData" MinWidth="700" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250*"></ColumnDefinition>
<ColumnDefinition Width="100*"></ColumnDefinition>
<ColumnDefinition Width="50*"></ColumnDefinition>
<ColumnDefinition Width="50*"></ColumnDefinition>
<ColumnDefinition Width="150*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" x:Name="name_ans" Text="{Binding name}" Foreground="#FF020202" TextWrapping="Wrap" HorizontalAlignment="Left" FontWeight="Normal"></TextBlock>
<TextBlock Grid.Column="1" x:Name="sku_ans" Text="{Binding surname}" Foreground="#FF040404" HorizontalAlignment="Left" TextWrapping="Wrap" FontWeight="Normal"></TextBlock>
<TextBlock Grid.Column="2" x:Name="qty_ans" Text="{Binding age}" Foreground="#FF080808" HorizontalAlignment="Left" FontWeight="Normal"></TextBlock>
<TextBlock Grid.Column="3" x:Name="price_ans" Text="{Binding city}" Foreground="#FF080808" Margin="0,0,0,0" HorizontalAlignment="Left" FontWeight="Normal"></TextBlock>
<TextBlock Grid.Column="4" x:Name="status_ans" Text="{Binding addres}" Foreground="#FF080808" HorizontalAlignment="Left" FontWeight="Normal"></TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I designed this way but the Grid not properly work responsiveness as per the view so, If there are any solution which make it easily responsive so provide a solution.
We can provide a width of listview in code behind (c#) through the managing all visual state.
Code:
if (PageSizeStatesGroup.CurrentState == WideState) //Desktop Devie
{
}
else if (PageSizeStatesGroup.CurrentState == MediumState) // // //tablate state
{
lstorderdetail.Width = 650;
}
else if (PageSizeStatesGroup.CurrentState == MobileState)
{
}
else
{
lstorderdetail.Width = 1200;
new InvalidOperationException();
}
Use PageSizeStatesGroup to manage the visual state and then provide a width as per your scrrn requirement.
Please tell more about your current problem (at which view size it has problem ? What is your desired result ?).
Depend on your view port / device requirements, you can chose one or combine the following solutions:
Use difference XAML for each device family
Use VisualState to change the size/flow of content of the view
Check the conditions in code behind and adjust the view accordingly
Programmatically build your UI from code behind
The best thing you could do is to use State Triggers which automatically resize based on the Screen size.
Check this example

Windows Store Apps 8.1 and VisualStateManager

I am having a difficult time solving a Visual State problem after moving to VS2013 and Windows Store Apps for 8.1. I have an app with a AppBar "About" button that takes the user to the About page. Works just fine. I want a stackpanel on the About page to change orientation when the view changes to Portrait. Been working on this for hours and reading countless websites with exact replicas of this code, but mine will not work. Any ideas?
Here's the C# code on AboutPage.cs:
private void AboutPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (e.NewSize.Height / e.NewSize.Width >= 1)
{
VisualStateManager.GoToState(this, "Portrait", true);
}
else
{
VisualStateManager.GoToState(this, "DefaultLayout", true);
}
}
Here's the XAML on AboutPage.xaml:
<Page
x:Name="pageRoot"
x:Class="xxxxxxxxxxxxxxxxx.AboutPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:xxxxxxxxxxxxxxxxxx"
xmlns:common="using:xxxxxxxxxxxxxxx.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" SizeChanged="AboutPage_SizeChanged">
<Page.Resources>
<!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
<!--<x:String x:Key="AppName">xxxxxxxxxxxxxxxxxxx</x:String>-->
</Page.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid x:Name="pageMainGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid x:Name="pageHeaderGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel
x:Name="headerStackPanel"
Grid.ColumnSpan="3"
Background="#FF4617B4"
Orientation="Horizontal" >
<Button
x:Name="backButton"
Margin="39,59,39,0"
Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock
x:Name="pageTitle"
Style="{StaticResource HeaderTextBlockStyle}"
Grid.Column="1"
IsHitTestVisible="false"
TextWrapping="NoWrap"
VerticalAlignment="Bottom"
Margin="0,0,30,40"
Text="{StaticResource AppName}"/>
</StackPanel>
</Grid>
<Grid
x:Name="pageContentGrid"
Grid.Row="1"
Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="20*"/>
<RowDefinition Height="142*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150*"/>
<ColumnDefinition Width="372*"/>
<ColumnDefinition Width="150*"/>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,0,0,0"
TextAlignment="Center"
Text="About"
FontSize="48"
FontFamily="Segoe UI"/>
<ScrollViewer
BorderThickness="0,2,0,0"
BorderBrush="DarkGray"
Grid.Row="1"
Grid.Column="1"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
Margin="0">
<StackPanel
Margin="40">
<TextBlock
Text="xxxxxxxxxxxxxxxxxx"
FontSize="34" />
<TextBlock
Text="by xxxxxxxxxx"
FontSize="24"/>
<StackPanel
Orientation="Vertical"
Margin="0,25,0,0">
<TextBlock
Margin="0,6,0,0"
Padding="0,0,0,0"
Text="Website:"
FontSize="24"
VerticalAlignment="Center"/>
<HyperlinkButton
Margin="0,0,0,0"
Padding="-5,0,0,0"
FontSize="20"
NavigateUri="http://www.xxxxxxxxxxxxxx.com"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="www.xxxxxxxxxxxxxxxxxx.com" />
</StackPanel>
<StackPanel
x:Name="emailStack"
Orientation="Vertical"
Margin="0,25,0,0">
<TextBlock
Margin="0,4,0,0"
Padding="0,0,0,0"
Text="Support Email:"
FontSize="24"
VerticalAlignment="Center"/>
<HyperlinkButton
Margin="0,0,0,0"
Padding="-5,0,0,0"
FontSize="20"
NavigateUri="mailto:xxxxxxxxxxxxxx#gmail.com"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="xxxxxxxxxxxxxxxxx#gmail.com" />
</StackPanel>
<TextBlock
Margin="0,30,0,0"
Text="Feedback:"
FontSize="24"/>
<TextBlock
TextWrapping="Wrap"
Margin="0,10,0,10"
FontSize="20" >
Please take a few moments to rate and review my application.
Every little bit of encouragement and/or constructive feedback
is appreciated.
<LineBreak /><LineBreak />
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</TextBlock>
</StackPanel>
</ScrollViewer>
<Rectangle
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
HorizontalAlignment="Stretch"
Fill="DarkGray" />
<Rectangle
Grid.Row="0"
Grid.Column="2"
Grid.RowSpan="2"
HorizontalAlignment="Stretch"
Fill="DarkGray" />
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="DefaultLayout">
<Storyboard>
</Storyboard>
</VisualState>
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(StackPanel.Orientation)"
Storyboard.TargetName="emailStack">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Orientation>Horizontal</Orientation>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
This needs to be highlighted because it's the answer:
Ok, finally... problem solved! The trick was to locate the VisualStateManager XAML block right after the Grid that contains the control you want to modify when changing screen size. I modified the AboutPage XALM block in my original post to show the correct configuration
This is a breaking change from .NET 4.5.1 where you can place the VisualStateManager before the controls that are effected.
Putting the VisualStateManager within the main control in the content of your Page (usually a Grid or a StackPanel) should change the layout of your AppBar. Give it a try.
<Page
...
SizeChanged="Page_SizeChanged">
<Page.BottomAppBar>
<AppBar>
<StackPanel
x:Name="emailStack"
Orientation="Vertical"
Margin="0,25,0,0">
<TextBlock
Margin="0,4,0,0"
Padding="0,0,0,0"
Text="Support Email:"
FontSize="24"
VerticalAlignment="Center"/>
<HyperlinkButton
Margin="0,0,0,0"
Padding="-5,0,0,0"
FontSize="20"
NavigateUri="mailto:xxxxxxxxxx#gmail.com"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="xxxxxxxxxxx#gmail.com" />
</StackPanel>
</AppBar>
</Page.BottomAppBar>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="DefaultLayout">
<Storyboard>
</Storyboard>
</VisualState>
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(StackPanel.Orientation)"
Storyboard.TargetName="emailStack">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Orientation>Horizontal</Orientation>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</Page>

Change binded ContentControl's VisualState from it's parent ListBox on WP7

I have the following situation:
public class EbookPhotoSummary : ContentControl
{
...
#region Construtores
public EbookPhotoSummary()
{
DefaultStyleKey = typeof(EbookPhotoSummary);
this.Loaded += new RoutedEventHandler(EbookPhotoSummary_Loaded);
}
...
}
This ContentControl has a Style definition (I'm only displaying the important part):
<Style TargetType="local:EbookPhotoSummary">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:EbookPhotoSummary">
<Border>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="EbookListingStates">
<VisualState x:Name="EbooksThumbnail"/>
<VisualState x:Name="EbooksList">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content" Storyboard.TargetName="hplMore">
<DiscreteObjectKeyFrame KeyTime="0" Value="[link]"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="LayoutRoot" Height="235">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="140"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentControl Content="{Binding CoverImage}" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="0"/>
<Grid Margin="10,0,0,0" Grid.Column="1">
...
<HyperlinkButton Name="hplMore" Content="{Binding Path=LocalizedResources.Button_Text_More_Library, Source={StaticResource LocalizedStrings}}" Foreground="{StaticResource PhoneAccentBrush}" Height="30" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Row="3"/>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then, I put this ContentControl as DataTemplate of a ListBox:
<ListBox x:Name="lsbEbooksInLibrary" ItemsSource="{Binding}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border Background="Transparent">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Add Color" Click="ContextMenuItem_Click"/>
<toolkit:MenuItem Header="Remove Color" Click="ContextMenuItem_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<local:EbookPhotoSummary x:Name="ebookTeste" Margin="0,0,0,10">
...
</local:EbookPhotoSummary>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
What I want is when I click an ApplicationBar's button, the "EbooksList" VisualState be applied, which I'm trying to do this way:
private void mniVisualizationMode_Click(object sender, EventArgs e)
{
this.GetItemsRecursive(lsbEbooksInLibrary);
lsbEbooksInLibrary.UpdateLayout();
}
and
private void GetItemsRecursive(DependencyObject lb)
{
var childrenCount = VisualTreeHelper.GetChildrenCount(lb);
for (int i = 0; i < childrenCount; i++)
{
var child = VisualTreeHelper.GetChild(lb, i);
if (child is ListBoxItem)
{
VisualStateManager.GoToState(child as Control, "EbooksList", false);
}
GetItemsRecursive(child);
}
}
but nothing happens. I already know that GoToState is returning false, but I don't know why. Any ideas?
Thanks in advance.

Allignment of controls in Datatemplate of listbox in silverlight

I need the following alignment
For that I have created the xaml file as follows,
<!--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="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ListBox ItemsSource="{Binding Collections}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding Icon}" HorizontalAlignment="Left" VerticalAlignment="Center" />
<Grid Grid.Column="1" HorizontalAlignment="Right" >
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="0.600*" />
<RowDefinition Height="0.400*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding MainTextBlock}" VerticalAlignment="Center" />
<Grid Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.300*" />
<ColumnDefinition Width="0.700*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Value}" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBlock Grid.Column="1" Text="{Binding DateString}" HorizontalAlignment="Right" VerticalAlignment="Center" />
</Grid>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
but I did not get the as expected result. what should i do for that? sub2 is always left aligned but actually we need it to be Right aligned.
Thanks in advance
dinesh
I think the problem is with the nested grid elements that you're using in your DataTemplate. You can simplify the visual tree and achieve the desired results by using a single Grid that has the column and row definitions and then use the Grid.ColumnSpan and Grid.RowSpan attached properties as shown in the following XAML:
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition Width="0.7*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.6*"/>
<RowDefinition Height="0.4*"/>
</Grid.RowDefinitions>
<Image
Grid.RowSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Source="{Binding Icon}"/>
<TextBlock
Grid.Column="1"
Grid.ColumnSpan="2"
Grid.Row="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding MainTextBlock}"/>
<TextBlock
Grid.Column="1"
Grid.Row="1"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="{Binding Value}"/>
<TextBlock
Grid.Column="2"
Grid.Row="1"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Text="{Binding DateString}"/>
</Grid>
To achieve list box items that stretch the full width of the ListBox you need to add an ItemContainerStyle that sets the HorizontalContentAlignment to Stretch. You can create a copy of the default style in Expression Blend, or use the following:
<Style x:Key="FullWidthItemStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border
x:Name="LayoutRoot"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="ContentContainer"
Storyboard.TargetProperty="Opacity"
To=".5"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl
x:Name="ContentContainer"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Resources