Tiles generate reflected latters and also doesn't implement the image - xaml

I am a Beginner.
in my visual studio for express phone 2013 using c# there is in my app consider the many internal tiles. tiles showing reflected latters and also doesn't showing image.
how to navigate another page when tiles clicked. I have created tiles using the xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
my source code is
<StackPanel Orientation="Horizontal" Margin="12,0,0,0" >
<toolkit:WrapPanel x:Name="horizontalWrapPanel" Orientation="Horizontal" VerticalAlignment="Top"/>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0">
<toolkit:HubTile Title="Quadratic Equation" Source="C:\SEM'S\windows dev center\samples\HubTilesPanorama\HubTilesPanorama\Images\quadratic equ.jpg" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,0" Background="#696969" GroupTag="StaticHubTile"/>
<toolkit:HubTile Title="Logarithm" Source="/HubTilesPanorama;component/Images/logaritham.jpg" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="12,0,0,0" Background="#696969" GroupTag="StaticHubTile"/>
<toolkit:HubTile Title="Polynomials" Source="/HubTilesPanorama;component/Images/polynomials.jpg" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="12,0,0,0" Background="#696969" GroupTag="StaticHubTile"/>
</StackPanel>
</StackPanel>
how to navigate another page through click on that tiles.

Try this:
Check if Images are Showing or not. It must Show by this Code below. Check that you are passing right path of images or not.
XAML:
<StackPanel Orientation="Horizontal" Margin="12,0,0,0" >
<toolkit:WrapPanel x:Name="horizontalWrapPanel" Orientation="Horizontal" VerticalAlignment="Top"/>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0">
<toolkit:HubTile Title="Quadratic Equation" Source="/Assets/ApplicationIcon.png" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,0" Background="#696969" GroupTag="StaticHubTile" Tap="HubTile_Tap"/>
<toolkit:HubTile Title="Logarithm" Source="/Assets/ApplicationIcon.png" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="12,0,0,0" Background="#696969" GroupTag="StaticHubTile" Tap="HubTile_Tap"/>
<toolkit:HubTile Title="Polynomials" Source="/Assets/ApplicationIcon.png" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="12,0,0,0" Background="#696969" GroupTag="StaticHubTile" Tap="HubTile_Tap"/>
</StackPanel>
</StackPanel>
CS:
private void HubTile_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));
}

Related

Items in a horizontal StackPanel position incorrectly on remote device (Windows Store App)

I'm developing a Windows Store App for Windows 8.1 for use with a specific kind of Surface Pro tablet.
While in the Designer, I lined up two TextBlocks exactly as I wanted them using a horizontal StackPanel and ran them in the Simulator (1920x1080) and they were aligned properly. When the same app was exported to the device (1920x1080), the text slanted downward, with each additional TextBlock bringing each TextBlock after it down by 2px.
How can I ensure that the items in the StackPanel don't move themselves downwards on my device? Thanks!
<StackPanel Grid.Column="1" HorizontalAlignment="Left" Orientation="Horizontal" Margin="0,0,30,40" VerticalAlignment="Bottom">
<TextBlock x:Name="pageTitle" Text="" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" FontFamily="Global User Interface"/>
<StackPanel Grid.Column="1" HorizontalAlignment="Left" Orientation="Horizontal" Height="30" Margin="20,0,0,0" VerticalAlignment="Bottom" Width="867">
<TextBlock Text="{Binding A}" Style="{StaticResource SubheaderTextBlockStyle}" FontFamily="Global User Interface" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Margin="14,6,12,0" Text="" FontSize="18" FontFamily="Segoe UI Symbol" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text="{Binding B}" Style="{StaticResource SubheaderTextBlockStyle}" FontFamily="Global User Interface" VerticalAlignment="Top" HorizontalAlignment="Left" />
<TextBlock Margin="14,6,12,0" Text="" FontFamily="Segoe UI Symbol" FontSize="18" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Text="{Binding C}" Style="{StaticResource SubheaderTextBlockStyle}" FontFamily="Global User Interface" VerticalAlignment="Top" HorizontalAlignment="Left" />
<TextBlock Margin="14,6,12,0" Text="" FontFamily="Segoe UI Symbol" FontSize="18" HorizontalAlignment="Left" VerticalAlignment="Top" />
</StackPanel>
</StackPanel>

Strange issue with ScrollViewer in XAML

I am trying to place a ScrollViewer around a TextBlock in XAML (here, the textblock is called ImageText). Here is my code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="-20,0,-22,0">
<TextBlock x:Name="TextBlock1" HorizontalAlignment="Left" Margin="130,64,0,0" TextWrapping="Wrap" Text="Load the image here." VerticalAlignment="Top" Height="37" Width="555" FontSize="25"/>
<Button x:Name="LoadButton" Content="Load" HorizontalAlignment="Left" Margin="50,138,0,0" VerticalAlignment="Top" Height="87" Width="160" FontFamily="Global User Interface" Click="LoadButton_Click"/>
<Button x:Name="ExtractButton" Content="Extract" HorizontalAlignment="Left" Margin="240,138,0,0" VerticalAlignment="Top" Height="87" Width="160" FontFamily="Global User Interface" Click="ExtractButton_Click"/>
<Image x:Name="PreviewImage" HorizontalAlignment="Left" Height="296" Margin="76,292,0,0" VerticalAlignment="Top" Width="296"/>
<TextBlock x:Name="ExtractedTextBlock" HorizontalAlignment="Left" Margin="922,64,0,0" TextWrapping="Wrap" Text="Extracted Text:" VerticalAlignment="Top" FontSize="25" Width="173"/>
<ScrollViewer>
<TextBlock x:Name="ImageText" Margin ="922,100,0,0" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Text Not Extracted" VerticalAlignment="Top" Height="427" Width="380"/>
</ScrollViewer>
However, when I try to run the program, it for some reason none of the buttons work i.e. I cannot click them, and when I remove the ScrollViewer, everything works fine. What am I doing wrong? Thanks in advance.
You placed the Margin in the TextBlock instead of the ScrollViewer, change to the following:
<ScrollViewer Margin ="922,100,0,0" >
<TextBlock x:Name="ImageText" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Text Not Extracted" VerticalAlignment="Top" Height="427" Width="380"/>
</ScrollViewer>
And now will work. Anyway instead of doing this like you did I encourage you to use Grid.Rows and Columns or RelativePanel (Windows 10 Apps)

Windows 8 Metro :: What is AutomationProperties.AutomationId and AutomationProperties.Name

As you can see in below code which I got from Microsoft Sample
<SemanticZoom.ZoomedOutView>
<tiles:VariableTileControl x:Name="SemanticItemGridView"
AutomationProperties.AutomationId="itemGridView"
AutomationProperties.Name="Grouped Items"
Padding="80,87,10,0"
ItemsSource="{Binding Source={StaticResource SemanticgroupedItemsViewSource}}"
ItemTemplateSelector="{StaticResource SemanticMyTemplates}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"
Margin="0,0,0,-13"
HorizontalAlignment="Left"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemContainerStyle="{StaticResource SemanticGridViewItemStyle}">
<tiles:VariableTileControl.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Margin="0,0,10,0"/>
</ItemsPanelTemplate>
</tiles:VariableTileControl.ItemsPanel>
<tiles:VariableTileControl.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Margin="1,0,0,6" Orientation="Horizontal" MinWidth="280">
<Button AutomationProperties.Name="Group Title"
Content="{Binding Title}"
Click="Header_Click"
Style="{StaticResource TextButtonStyle}" Foreground="White" FontSize="28" Background="#FFD71921" FontWeight="Light"/>
<TextBlock x:Name="tbk" Text="TM" VerticalAlignment="Top" Visibility="{Binding Tm}"/>
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="28" FontWeight="Light" Text="("/>
<TextBlock x:Name="txtNo" TextWrapping="Wrap" Text="{Binding No}" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="28" FontWeight="Light"/>
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="28" FontWeight="Light" Text=")"/>
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="10,0,0,10" Style="{StaticResource GroupHeaderTextStyle}" Foreground="#FF9F9F9F"/>
<TextBlock x:Name="txtVideo" HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Sub}" VerticalAlignment="Bottom" Foreground="#FFC4261D" Margin="0,21,0,0" FontFamily="Segoe UI" FontSize="16" Visibility="{Binding SubTl}"/>
<TextBlock x:Name="txtPicture" HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Sub2}" VerticalAlignment="Bottom" Foreground="#FFC4261D" Margin="0,21,0,0" FontFamily="Segoe UI" FontSize="16" Visibility="{Binding SubT2}"/>
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemHeight="5" ItemWidth="5" Orientation="Vertical" Margin="0,0,10,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</tiles:VariableTileControl.GroupStyle>
</tiles:VariableTileControl>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<GridView x:Name="itemGridView"
AutomationProperties.AutomationId="itemGridView"
AutomationProperties.Name="Grouped Items"
Padding="116,110,40,10"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
ItemTemplateSelector="{StaticResource LivTemplates}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource HubPageMoreGroupItemStyle}">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Margin="1,0,0,6" Orientation="Horizontal">
<Button AutomationProperties.Name="Group Title"
Content="{Binding name}"
Click="Header_Click"
Style="{StaticResource TextButtonStyle}"
Foreground="White" FontSize="32"
Background="#FFD71921" FontWeight="Light"/>
<TextBlock x:Name="tbk" Text="TM" VerticalAlignment="Top" Visibility="{Binding Tm}"/>
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="10,0,0,10" Style="{StaticResource GroupHeaderTextStyle}" Foreground="#FF9F9F9F"/>
<TextBlock x:Name="txtVideo" HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Sub}" VerticalAlignment="Bottom" Foreground="#FFC4261D" Margin="0,21,0,0" FontFamily="Segoe UI" FontSize="16" Visibility="{Binding SubTl}"/>
<TextBlock x:Name="txtPicture" HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Sub2}" VerticalAlignment="Bottom" Foreground="#FFC4261D" Margin="0,21,0,0" FontFamily="Segoe UI" FontSize="16" Visibility="{Binding SubT2}"/>
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemHeight="5" ItemWidth="5" Orientation="Vertical" Margin="0,0,133,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
In above code I am interested only in one in line which is shown below
AutomationProperties.AutomationId="itemGridView"
AutomationProperties.Name="Grouped Items"
I want to know what is the role of above mentioned lines in xaml.
From the Microsoft Overview of UI Automation
... It enables assistive technology products, such as screen readers, to provide information about the UI to end users and to manipulate the UI by means other than standard input...
http://msdn.microsoft.com/en-us/library/windows/desktop/ee684009.aspx
EDIT:
For example, in Visual Studio, if you create a new Windows Store Grid App, check out the GroupedItemsPage.xaml. You'll see a few places where AutomationProperties.Name has been set.
Now open the Windows 8 Charms Bar and search for "Narrator," and run the Narrator app that comes up in the results. You'll hear a man start reading things on the screen.
If you go back to Visual Studio and run the new Grid App you created, the Narrator will read various things in the Grid App, some of which will be the AutomationProperties.Names defined in xaml.
Try changing the AutomationProperties.Name to get a feel for how it works.
I did some research on this aswell, I wanted to use it to set a visibility inside a Style-ControlTemplate.
However, this page explains how you can use the AutomationProperties:
http://msdn.microsoft.com/en-us/library/ff400332%28v=vs.95%29.aspx
For example, consider this xaml::
<Button AutomationProperties.Name="Back"
Content="{Binding Title}"
Style="{StaticResource TextButtonStyle}" />
Look at the style it uses: {StaticResource TextButtonStyle}, this corresponds to a Style in one of your ResourceDictionaries.
<Style x:Key="TextButtonStyle" TargetType="ButtonBase">
Inside this style the AutomationProperties can be used:
<TextBlock x:Name="TextLabel" Text="{TemplateBinding AutomationProperties.Name}" />
So Basicly you can use the AutomationProperties to fill a template with specific properties.

XAML datagrid datatemplate

I'm going through the Windows 8 Bing Translator Walkthrough
I was able to follow everything except the XAML part. I'm very new to XAML. Below is what the walkthrough appears to recommend, however VS2012 indicated the markup is invalid, and the error displayed says "the property "content" is set more than once". Is this the only issue? Where this is set more than once?
<GridView ItemTemplate="{StaticResource TweetTemplate}" SelectionMode="None" ItemsSource="{Binding tweets}"></GridView>
<DataTemplate x:Key="TweetTemplate">
<Grid>
<Rectangle Fill="#FFDA713F" HorizontalAlignment="Left" Height="115" Margin="10,11,0,0"
VerticalAlignment="Top" Width="455" RadiusX="20" RadiusY="20"/>
<TextBlock Foreground="White" HorizontalAlignment="Left" Height="50"
Margin="176,12,0,0" TextWrapping="Wrap" x:Name="txtTweet"
Text="{Binding Title}" VerticalAlignment="Top" Width="277" FontSize="12"/>
<TextBlock Foreground="White" HorizontalAlignment="Left" Height="50"
Margin="176,72,0,0" TextWrapping="Wrap" x:Name="txtTrans"
Text="{Binding translatedText}" VerticalAlignment="Top" Width="277"
FontSize="12"/>
<Image Source="{Binding ImageUri}" HorizontalAlignment="Left" Height="89"
Margin="20,20,0,0" VerticalAlignment="Top" Width="116"/>
<TextBlock Foreground="White" HorizontalAlignment="Left" Height="17"
Margin="24,109,0,0" TextWrapping="Wrap" Text="{Binding Author}"
VerticalAlignment="Top" Width="150" FontSize="10"/>
</Grid>
</DataTemplate>
...and no sooner do I post the question, I find the answer. the above needs to be arranged as follows:
Note that from the example in the link provided above the author used RefreshAppBarButtonStyle. This was changed to AppBarButtonStyle. I;m not sure I fully understand the xaml page yet, but at least I have a working framework to diagnose.
<Page.Resources>
<DataTemplate x:Key="TweetTemplate">
<Grid>
<Rectangle Fill="#FFDA713F" HorizontalAlignment="Left" Height="115" Margin="10,11,0,0" VerticalAlignment="Top" Width="455" RadiusX="20" RadiusY="20"/>
<TextBlock Foreground="White" HorizontalAlignment="Left" Height="50" Margin="176,12,0,0" TextWrapping="Wrap" x:Name="txtTweet" Text="{Binding Title}" VerticalAlignment="Top" Width="277" FontSize="12"/>
<TextBlock Foreground="White" HorizontalAlignment="Left" Height="50" Margin="176,72,0,0" TextWrapping="Wrap" x:Name="txtTrans" Text="{Binding translatedText}" VerticalAlignment="Top" Width="277" FontSize="12"/>
<Image Source="{Binding ImageUri}" HorizontalAlignment="Left" Height="89" Margin="20,20,0,0" VerticalAlignment="Top" Width="116"/>
<TextBlock Foreground="White" HorizontalAlignment="Left" Height="17" Margin="24,109,0,0" TextWrapping="Wrap" Text="{Binding Author}" VerticalAlignment="Top" Width="150" FontSize="10"/>
</Grid>
</DataTemplate>
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<GridView ItemTemplate="{StaticResource TweetTemplate}" SelectionMode="None" ItemsSource="{Binding tweets}"></GridView>
</Grid>
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<TextBlock x:Name="txtPrompt" Text="Search Term: " Height="24" FontSize="24"></TextBlock>
<TextBox x:Name="txtSearchTerm" Width="300" Height="24"></TextBox>
<Button Style="{StaticResource AppBarButtonStyle}" Click="Button_Click_1" />
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
Hope this is also of use to someone else.
Paul

Horizontal alignment of Expanderview items in windows phone 7

I want to align the contents or items of ExpanderView in horizontal layout instead of vertical layout. The ExpanderHeader is set dynamically and also its contents are added dynamically.
The xaml part and CustomeItemTemplate in app.xaml is as below
<toolkit:ExpanderView
Width="470"
Header="{Binding TaskName, Mode=TwoWay}"
x:Name="taskNameExpander"
Margin="5,10,5,10"
Foreground="#FF677389" FontSize="24" VerticalAlignment="Top"
HorizontalAlignment="Left"
ItemsSource="{Binding dateTime}"
ItemTemplate="{StaticResource CustomItemTemplate}"
HorizontalContentAlignment="Left">
</toolkit:ExpanderView>
<DataTemplate x:Key="CustomItemTemplate">
<StackPanel Orientation="Horizontal" Height="60" >
<TextBlock FontSize="16" Text="{Binding Date, Mode=OneWay}"
TextWrapping="Wrap" Foreground="#FF677389" Margin="0,6,0,0" Height="30" Width="100"/>
<TextBox BorderBrush="Goldenrod" BorderThickness="1" FontSize="16" Text="{Binding Time, Mode=TwoWay}" TextWrapping="Wrap" Foreground="#FF677389" Margin="0" Height="60" Width="150"/>
</StackPanel>
</DataTemplate>
Still i get the contents aligned vertically. Can someone point me what am i doing wrong here?
here is the sample code you have asked for
<Border BorderBrush="White" BorderThickness="1" Margin="5">
<ScrollViewer Width="Auto" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
<toolkit:ExpanderView
Width="1600"
Header="{Binding TaskName, Mode=TwoWay}"
x:Name="taskNameExpander" Margin="5,10,5,10" Foreground="#FF677389" FontSize="24" VerticalAlignment="Top" HorizontalAlignment="Left"
ItemsSource="{Binding dateTime}"
ItemTemplate="{StaticResource CustomItemTemplate}"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
HorizontalContentAlignment="Left">
<toolkit:ExpanderView.ItemsPanel>
<ItemsPanelTemplate >
<StackPanel Orientation="Horizontal" Width="Auto" ScrollViewer.HorizontalScrollBarVisibility="Visible"/>
</ItemsPanelTemplate>
</toolkit:ExpanderView.ItemsPanel>
</toolkit:ExpanderView>
</ScrollViewer>
</Border>
and my app.xaml has CustomItemTemplate definition as below
<DataTemplate x:Key="CustomItemTemplate">
<StackPanel Orientation="Vertical" Height="100" >
<TextBlock FontSize="16" Text="{Binding Date, Mode=OneWay}" TextWrapping="Wrap" Foreground="#FF677389" Margin="0,6,0,0" Height="30" Width="100"/>
<TextBox BorderBrush="Goldenrod" BorderThickness="1" FontSize="16" Text="{Binding Time, Mode=TwoWay}" TextWrapping="Wrap" Foreground="#FF677389" Margin="0" Height="60" Width="150">
<TextBox.InputScope>
<InputScope >
<InputScopeName NameValue="Number"></InputScopeName>
</InputScope>
</TextBox.InputScope>
</TextBox>
</StackPanel>
</DataTemplate>
I want to horizontally scroll only ExpanderView items. Rightnow it is scrolling but the whole ExpanderView is scrolling including its header. The header must be intact and only the items must scroll. How can i acheive it?
You should set the ItemsPanel for the ExpanderView control.
<toolkit:ExpanderView
Width="470" Height="100"
x:Name="taskNameExpander"
Margin="5,10,5,10"
FontSize="24" Background="White"
HorizontalAlignment="Left"
ItemsSource="1 2 3 4"
ItemTemplate="{StaticResource CustomItemTemplate}"
HorizontalContentAlignment="Left">
<toolkit:ExpanderView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</toolkit:ExpanderView.ItemsPanel>
</toolkit:ExpanderView>