Windows 7 Phone button with multiple textblocks - windows-phone-7

I have created a button in Blend by editing it's style. I added multiple text blocks with the intention of displaying data to the user in real time. However, I don't know how to interface with those text blocks in my code behind.
My Style XAML is this:
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource PhoneAccentBrush}" CornerRadius="0" Margin="8,12,12,12">
<TextBlock Margin="121,5,98,0" TextWrapping="Wrap" Text="Current Program:" Height="36" VerticalAlignment="Top"/>
</Border>
<TextBlock Margin="92,68,80,81" TextWrapping="Wrap" Text="" RenderTransformOrigin="0.265,0.51" HorizontalAlignment="Center" Width="271" x:Name="programName"/>
<TextBlock Height="32" Margin="21,0,16,12" TextWrapping="Wrap" Text="Date:" VerticalAlignment="Bottom" x:Name="CurrentDate"/>
</Grid>
</ControlTemplate>
My code to display the button is this:
<Grid x:Name="middleRow" Grid.Row="2">
<Button Content="Button" Margin="8,8,0,8" Style="{StaticResource ButtonCenter}" x:Name="Current" Click="Current_Click" d:LayoutOverrides="GridBox" />
</Grid>
In my code behind after the InitializeComponent(); I would like to change the ProgramName text block and the CurrentDate text block.
I'm thinking that I might have to create a control to do this but I'm not sure. My attempts at doing so failed (misc. errors). Can I access these text blocks in code? Please let me know.
UPDATE:
I wound up doing it like this:
<Button Margin="8,8,0,8" x:Name="Current" Click="Current_Click">
<Button.Content>
<StackPanel>
<TextBlock x:Name="ProgramName" Text="program name" HorizontalAlignment="Center" />
<TextBlock x:Name="CurrentDate" Text="current date" HorizontalAlignment="Center" />
</StackPanel>
</Button.Content>
</Button>
I applied my styles from the template in Blend and it appears to be working now.

You can't reference controls in a style by name as there could be multiple copies of them on a page.
If you made your button into a custom control you could make the text for the ProgramTitle and CurrentDate properties (which woudl be very easy to set).
Alternatively you could use databinding to set these values.

Related

Right Align all items in CollectionView in Xamarin Forms

I have been trying to right align all items in Xamarin forms CollectionView, unfortunately the code doesn't work for IOS while it works well in Android. It seems strange. When I load 100 items, only the 1st ten items which appears on the screen are right aligned, but then the rest is not aligned. Additionally, when I clear the collectionview and load next 100 items (this is part of the requirement), then the whole items are not aligned.
<CollectionView ItemsSource="{Binding ArabicListText}" SelectedItem="{Binding SelectedAya}"
SelectionMode="Single" ItemTemplate="{StaticResource ChapterItemTemplate}"
FlowDirection="RightToLeft" x:Name="itemView">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="1"/>
</CollectionView.ItemsLayout>
</CollectionView>
Datatemplate from resources
<DataTemplate x:Key="ChapterItemTemplate">
<SwipeView HorizontalOptions="StartAndExpand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource LightPageBackgroundPrimaryColor},
Dark={StaticResource DarkPageBackgroundPrimaryColor}}" />
</VisualState.Setters>
</VisualState>
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource LightPageBackgroundSecondaryColor},
Dark={StaticResource DarkPageBackgroundSecondaryColor}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackLayout Padding="10,0,5,0" HorizontalOptions="StartAndExpand">
<Label LineBreakMode="WordWrap" HorizontalTextAlignment="Start" HorizontalOptions="StartAndExpand" IsVisible="{Binding BindingContext.ShowEnglishVerseNumber,
Source={x:Reference MyPage}, Converter={StaticResource InverterBooleanConverter}}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding ArabicText.Aya}"
FontSize="{Binding BindingContext.ActiveArabicFont.FontSize, Source={x:Reference MyPage}}"
FontFamily="{Binding BindingContext.ActiveArabicFont.FontPath, Source={x:Reference MyPage}}"/>
<Span
Text="{Binding ArabicText.ArabicAyaNumber, StringFormat='﴿{0}﴾'}"
FontSize="35" FontFamily="Sherzad"></Span>
</FormattedString>
</Label.FormattedText>
</Label>
<BoxView Style="{StaticResource HorizentalLine}" IsVisible="{Binding BindingContext.ShowHorizentalLine, Source={x:Reference MyPage}}"/>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="2" Command="{Binding BindingContext.ShareAyaCommand,
Source={x:Reference itemView}}"
CommandParameter="{Binding .}"/>
<SwipeGestureRecognizer Direction="Right" Command="{Binding BindingContext.NextChapterCommand,
Source={x:Reference MyPage}}"/>
<SwipeGestureRecognizer Direction="Left" Command="{Binding BindingContext.PreviousChapterCommand,
Source={x:Reference MyPage}}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
</SwipeView>
</DataTemplate>
When I have fewer items says 10, all the items are aligned accordingly. However, when the number of items grow to 100, then strangly, the only few top items are well aligned and the rest are not aligned. When I scroll back to the top, then all the items are aligned incorrectly.
Update 2
If I remove Span and change them to labels then all the labels are aligned accordingly, but having the span creates the problem.
The only temp solution I found is to change Spans to Labels, but it doesn't display text as the Span after one another horizentally. Because using Span I want to show two diff texts after one finishes which I can't acheive similiar result using two Labels.

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>

Code behind for event Fire on Mainpage rather than UserControl

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

Content in Hyperlink Button doesnt show

Im currently trying to add some Style to my Hyperlinkbutton, but cannot get it to work.
After some searching, I found this Tutorial, but even after copying the whole code (and only changing the picture) it doesnt work for me. My SDK-Target is 7.5.
Here my Code:
<ScrollViewer>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<HyperlinkButton NavigateUri="/Views/PanoramaPage.xaml" Content="Panorama" Foreground="{StaticResource PhoneAccentBrush}"/>
<HyperlinkButton NavigateUri="/Views/PanoramaPage.xaml" Content="Pivot" Foreground="{StaticResource PhoneAccentBrush}"/>
<HyperlinkButton Name="hyperlinkButton1" NavigateUri="/Views/PanoramaPage.xaml" >
<Border BorderBrush="White" BorderThickness="5" Padding="10">
<StackPanel Orientation="Horizontal">
<Image Width="60" Source="/Presentation;component/Images/refresh.png" />
<TextBlock VerticalAlignment="Center" Text="Go to View.xaml"/>
</StackPanel>
</Border>
</HyperlinkButton>
</StackPanel>
</ScrollViewer>
Tutorial-Url:
http://www.imaginativeuniversal.com/blog/post/2010/07/05/Navigating-around-windows-phone-7.aspx
The default control template for the HyperlinkButton is a TextBlock, so all it can handle is text!
One way to go around this is to change the control template, like this:
<HyperlinkButton Name="hyperlinkButton1" NavigateUri="/Views/PanoramaPage.xaml">
<HyperlinkButton.Template>
<ControlTemplate TargetType="HyperlinkButton">
<Border BorderBrush="White" BorderThickness="5" Padding="10">
<StackPanel Orientation="Horizontal">
<Image Width="60" Source="/Presentation;component/Images/refresh.png" />
<TextBlock VerticalAlignment="Center" Text="Go to View.xaml"/>
</StackPanel>
</Border>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>

Resources