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>
Related
I am using ListPicker from windows phone toolkit. My options are pretty lengthy so my ItemTemplate is,
<DataTemplate>
<TextBlock TextWrapping="Wrap"/>
</DataTemplate>
Now, when I select a lengthy option(say three lines) in Expansion Mode (less then 5 options) it is working good as expected, but when I Use FullMode(more than 5 items) it is not wrapped in the ListPicker.
To be more clear, It is wrapped as expected in the FullModePage but it is not within the control.
<toolkit:ListPicker Margin="0" MinHeight="70" toolkit:TiltEffect.SuppressTilt="True" Template="{StaticResource ListPickerControlCustomTemplate}" HorizontalAlignment="Stretch" VerticalAlignment="Top" FontFamily="{StaticResource RegularFont}"
SelectionChanged="SharedAppsCategoryListPicker_OnSelectionChanged" Name="SharedAppsCategoryListPicker"
LayoutUpdated="SharedAppsCategoryListPicker_OnLayoutUpdated" >
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,20,0">
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="20,15,120,15" FontSize="20" Text="{Binding groupname}" Foreground="{StaticResource ListPickerForegroundColor}"></TextBlock>
<Rectangle Margin="20,10,0,-11" Height="0.5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Stroke="{StaticResource ListPickerDividerColor}" StrokeThickness="0.5" />
</Grid>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<Grid Margin="0,0,20,0">
<TextBlock MaxWidth="250" Width="250" TextWrapping="Wrap" FontSize="20" Margin="0,0,120,0" VerticalAlignment="Center" Text="{Binding groupname}" Foreground="{StaticResource ListPickerForegroundColor}" FontFamily="{StaticResource RegularFont}"></TextBlock>
</Grid>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
you would be needed to give width for the Textblock after then Text Would be Wrapped if content is larger than the width of the Textblock.
try this :
<DataTemplate>
<TextBlock TextWrapping="Wrap" width=200/>
</DataTemplate>
Edit:
I have Implemeted it this way
XAML:
<toolkit:ListPicker Margin="0" MinHeight="70" toolkit:TiltEffect.SuppressTilt="True" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="SharedAppsCategoryListPicker" >
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,20,0">
<TextBlock Width="300" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="20,15,120,15" FontSize="20" Text="{Binding}" ></TextBlock>
</Grid>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<Grid Margin="0,0,20,0">
<TextBlock Width="400" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" VerticalAlignment="Center" Text="{Binding}" ></TextBlock>
</Grid>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
Images of O/P:
My ItemView_ItemClick is not executed when I click on a tile (except if I click on the rectangle selector).
Why ? How can I do that ? Thanks.
<GridView Grid.Row="1" Grid.Column="1" ItemsSource="{Binding Products}" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<GridViewItem>
<Grid Width="300" Height="200">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding SmallPic, Converter={StaticResource imageConverter }}" Stretch="UniformToFill"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Opacity="1" Background="#7F000000" >
<TextBlock Text="{Binding Name}" Style="{StaticResource ItemContentStyle}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Price, Converter={StaticResource priceConverter }}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</GridViewItem>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
Moving my comment to an answer....
The <GridViewItem> inclusion is unnecessary and seems to be causing the unwanted behavior.
Another day another problem, this time I think with a simple issue into XAML formatting.
I have a ListPicker in a StackPanel on a XAML page in a WP7 app. Whenever I tap the ListPicker, it expands, but it appears to expand behind the item below it. If I have enough items in the list it opens in full screen mode which works fine.
Any suggestions, pointers would be appreciated;
<Grid Name="grdBought">
<StackPanel Visibility="Visible" Margin="0,0,0,0" Height="480">
<Button Name="btnSave" Grid.Row="0" Content="Save" Height="100" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="378" Click="btnSave_Click" />
<StackPanel Grid.Row="1" Orientation="Vertical">
<toolkit:ListPicker Name="CategoryPicker" Header="Select Category" HorizontalAlignment="Left" ItemsSource="{Binding Categories}" CacheMode="BitmapCache" TabIndex="0" Margin="0,0,0,0" SelectionChanged="CategoryPicker_SelectionChanged" Height="100" Width="195">
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" HorizontalAlignment="Left">
<TextBlock Text="{Binding CategoryDesc}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="{StaticResource PhoneFontSizeMediumLarge}" />
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<StackPanel Name="item" Orientation="Vertical" Margin="0, 0, 0, 0">
<TextBlock Margin="0, 0, 0, 0" Text="{Binding CategoryDesc}" FontSize="40" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
<StackPanel Name="Items" Grid.Row="1" Orientation="Horizontal">
<TextBox Name="txtDescription" Height="100" Margin="0,0,0,0" Text="" Width="225" MaxLength="100" FontSize="40" InputScope="Text" />
<TextBox Name="txtAmount" HorizontalAlignment="Left" Text="0.00" Height="100" Margin="0,0,0,0" TextAlignment="Right" FontSize="40" FontFamily="Segoe WP Semibold" Width="163" KeyUp="txtAmount_KeyUp" />
</StackPanel>
</StackPanel>
<TextBlock Name="tb1" Text="Amount" Height="27" Margin="0,0,0,0" Width="137" />
<Button Name="button1" Content="Button" Height="72" HorizontalAlignment="Left" Margin="249,0,0,0" VerticalAlignment="Top" Width="160" Click="button1_Click" />
</StackPanel>
I have been through the examples on the windowsphonegeek.com site, but I still can't make it work!
The issue is that you're setting the Height of the ListPicker to 100. Remove that, and just leave as auto. This is an issue b/c when you restrict the height, the listpicker has nowhere to expand (thus, showing the behavior you're seeing)
I guess height is creating an issue, just make sure that height of listpicker is greater than stackpanel.
I am binding a Pivot from backend.
The xaml for my Pivot is:
<controls:Pivot Name="MainPivot" Visibility="Collapsed">
<controls:Pivot.Background>
<ImageBrush ImageSource="Images/ItemBrowse.png"></ImageBrush>
</controls:Pivot.Background>
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock FontSize="38" Text="{Binding title}" Foreground="White"/>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate>
<ScrollViewer Name="scroll" Margin="-12" Background="LightGray" VerticalScrollBarVisibility="Auto">
<StackPanel>
<controls:PivotItem Name="pvtItemPrice" >
<StackPanel Orientation="Vertical">
<TextBlock Text="Price" Foreground="Black" FontWeight="Bold" FontSize="28" />
<TextBlock Text="{Binding price}" FontSize="22" Foreground="DarkCyan"/>
</StackPanel>
</controls:PivotItem>
<Border BorderThickness="2" BorderBrush="White" Height="3" Width="470"/>
<controls:PivotItem Name="pvtItemDescription" >
<StackPanel Orientation="Vertical">
<TextBlock Text="Description" Foreground="Black" FontWeight="Bold" FontSize="28" />
<TextBlock Text="{Binding description}" Foreground="Gray" FontSize="22" Width="460" TextWrapping="Wrap"/>
</StackPanel>
</controls:PivotItem>
<Border BorderThickness="2" BorderBrush="White" Height="3" Width="470"/>
<controls:PivotItem Name="pvtItemLocation" >
<StackPanel Orientation="Vertical">
<TextBlock Text="Location:" Foreground="Black" Padding="5" FontWeight="Bold" FontSize="28" />
<Grid >
<StackPanel>
<TextBlock Text="{Binding location}" FontSize="22" Foreground="Brown" Width="460" TextWrapping="Wrap" />
<Button BorderBrush="Transparent" Foreground="Yellow" Name="btnShowMap" Width="370" Content="View in Map" Click="btnShowMap_Click" Height="100">
<Button.Background>
<ImageBrush ImageSource="Images/ImgBtns.png" />
</Button.Background>
</Button>
</StackPanel>
</Grid>
</StackPanel>
</controls:PivotItem>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
But I have to show or hide the btnShowMap according to the user value. But I cannot get the control from backend. Is there anyway I can get the solution for this.
If you have the markup above within a page, you should find that Visual Studio will have generated a btnShowMap field for you. Simply navigate to the code-behind for this file and you will find it.
Howdy,
I would like to generate in my application several PivotItems in a pivotelement. The generation is proceeding fine, however I don't know how I can apply a template to those Pivot Elements.
I thought I would need to use:
pivotItem.ContentTemplate = (DataTemplate)Ressources["KantinenUebersicht"];
But that is only producing an empty page.
My code in the ressource file looks the following:
inserted my whole ressources File
<.ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DataTemplate x:Key="KantinenTemplate">
<StackPanel VerticalAlignment="Top">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding name}" FontSize="{StaticResource PhoneFontSizeLarge}" Margin="8,0,0,0" VerticalAlignment="Top"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding entfernung}" Margin="24,0,0,0" FontSize="{StaticResource PhoneFontSizeSmall}" VerticalAlignment="Bottom"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="KantinenUebersicht">
<Grid>
<TextBlock x:Name="KantinenName" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Text="" RenderTransformOrigin="0.566,0.407" Margin="0,0,8,0" Height="55" VerticalAlignment="Top">
<TextBlock.Foreground>
<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
</TextBlock.Foreground>
</TextBlock>
<TextBlock x:Name="sdfsdf" HorizontalAlignment="Left" Height="40" Margin="8,59,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="196"/>
<TextBlock x:Name="lblGeoefsdfsdffnet" Height="40" Margin="208,59,8,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
</Grid>
</DataTemplate></ResourceDictionary.>
Had to insert . in the first tags...
What you're trying to do is correct.
In your question you have an extra "S" in "Resources" which could be the issue.
If I take the code from your question, I can add it to the page:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="KantinenUebersicht">
<Grid>
<TextBlock x:Name="KantinenName" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Text="" RenderTransformOrigin="0.566,0.407" Margin="0,0,8,0" Height="55" VerticalAlignment="Top">
<TextBlock.Foreground>
<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
</TextBlock.Foreground>
</TextBlock>
<TextBlock x:Name="lblEntfernung" HorizontalAlignment="Left" Height="40" Margin="8,59,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="196"/>
<TextBlock x:Name="lblGeoeffnet" Height="40" Margin="208,59,8,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
and then use it when creating a new item:
var newItem = new PivotItem { Header = "Added" };
newItem.ContentTemplate = (DataTemplate)Resources["KantinenUebersicht"];
MyPivot.Items.Add(newItem);
Works on my machine (emulator).
Update:
If you want to add the resource to a separate file you can do so like:
ResourceDictionary.xaml:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<DataTemplate x:Key="KantinenUebersicht">
<Grid>
<TextBlock x:Name="KantinenName" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Text="" RenderTransformOrigin="0.566,0.407" Margin="0,0,8,0" Height="55" VerticalAlignment="Top">
<TextBlock.Foreground>
<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
</TextBlock.Foreground>
</TextBlock>
<TextBlock x:Name="lblEntfernung" HorizontalAlignment="Left" Height="40" Margin="8,59,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="196"/>
<TextBlock x:Name="lblGeoeffnet" Height="40" Margin="208,59,8,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
</Grid>
</DataTemplate>
</ResourceDictionary>
Then you must reference this external file in the page which wishes to use this file.
<phone:PhoneApplicationPage.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="\ResourceDictionary.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</phone:PhoneApplicationPage.Resources>