hit is not Visible on a button in windows phone 8 - xaml

I am making a button with a item template but when I click on Button its does not show that whether it is hit or not.
I want that it should look clicked like normal button.
I tried to set the ishitvisible property of the button but its not working.
Can anyone help ??
<Button Name="BtnSignUp" Grid.Row="3" VerticalAlignment="Top" Click="BtnSignUp_Click" >
<Button.Template>
<ControlTemplate>
<Border Margin="5,15,0,0" BorderThickness="2" BorderBrush="#866DA9">
<StackPanel Orientation="Horizontal" Background="#491776" IsHitTestVisible="True" >
<TextBlock Text="Sign Up Now -" Margin="35,5,0,0" FontSize="23" FontWeight="Medium"/>
<TextBlock Text=" it's free" Margin="0,5,35,10" FontSize="23" FontStyle="Italic" FontWeight="Normal" />
</StackPanel>
</Border>
</ControlTemplate>
</Button.Template>
</Button>

As you said, you are not using Item Template. You override Control Template. So you cannot get the default pressed effects of button. But still you can add that using Visual State Managers or through triggers.
I have posted an example of how to adjust opacity on mouse over and pressed.
<Button Name="BtnSignUp" Grid.Row="3" VerticalAlignment="Top" Click="BtnSignUp_Click" >
<Button.Template>
<ControlTemplate>
<Border Margin="5,15,0,0" BorderThickness="2" BorderBrush="#866DA9">
<StackPanel x:Name="bor" Orientation="Horizontal" Background="#491776" IsHitTestVisible="True" >
<TextBlock Text="Sign Up Now -" Margin="35,5,0,0" FontSize="23" FontWeight="Medium"/>
<TextBlock Text=" it's free" Margin="0,5,35,10" FontSize="23" FontStyle="Italic" FontWeight="Normal" />
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="bor" Property="Opacity" Value="0.7"/>
</Trigger>
<Trigger Property="Button.IsPressed" Value="True">
<Setter Property="Opacity" TargetName="bor" Value="0.6"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>

Related

How Can I Reuse an Icon in Resources in UWP? In WPF, I'd use x:Shared=false

I am trying to create a button Style that I can use for a "Lookup" button throughout my UWP app. However, the icon only appears on the first button on the screen. I tried this solution using templates, but it is not working for me. Thanks for the help.
Code:
<Page.Resources>
<ControlTemplate x:Key="FindSymbolTemplate">
<SymbolIcon Symbol="Find" Foreground="White" />
</ControlTemplate>
<Style TargetType="Button" x:Key="LookupButton">
<Setter Property="Content">
<Setter.Value>
<ContentControl Template="{StaticResource FindSymbolTemplate}" />
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
....
<Button x:Name="tourNumLookup"
Style="{StaticResource LookupButton}"
Grid.Column="1"
Margin="10,0"
VerticalAlignment="Center" />
....
<Button x:Name="customerIdLookup"
Style="{StaticResource LookupButton}"
VerticalAlignment="Center"
Grid.Column="1"
Grid.Row="1"
Margin="10,0" />
The two buttons in the UI. Only the first has the SymbolIcon content.
#Romasz's solution absolutely works, but what if you want a lightly different Foreground on the SymbolIcon inside another Button?
Here's a potentially more flexible way that I normally go with.
First let's create a base Style that holds some default values for all the icons.
<Style x:Key="Style-Icon-Base"
TargetType="ContentControl">
<!-- If you don't specify the Foreground, it will use its ancestor's -->
<!--<Setter Property="Foreground"
Value="White" />-->
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="Width"
Value="20" />
<Setter Property="Height"
Value="20" />
<Setter Property="Padding"
Value="0" />
</Style>
Then we create a new icon Style which inherits from the one above. Note within the ControlTemplate I have used TemplateBinding to make property values dynamic. TemplateBinding isn't available inside a DataTemplate.
<Style x:Key="Style-Icon-Find"
BasedOn="{StaticResource Style-Icon-Base}"
TargetType="ContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<!--
'cause you cannot change the size of the SymbolIcon, we insert a Viewbox here,
otherwise you don't need it.
-->
<Viewbox Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<SymbolIcon Symbol="Find"
Foreground="{TemplateBinding Foreground}" />
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This way you have created a highly reusable icon Style, to use it, have a look at the following Buttons:
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<Button Margin="4"
Padding="8"
BorderBrush="LightBlue">
<ContentControl Width="36"
Height="36"
Foreground="DarkCyan"
Style="{StaticResource Style-Icon-Find}" />
</Button>
<!-- Note how I defined the Foreground at the Button level and it flows down to the icon -->
<Button Foreground="DarkGoldenrod"
Margin="4">
<StackPanel Orientation="Horizontal">
<ContentControl Style="{StaticResource Style-Icon-Find}"
Width="16"
Height="16" />
<TextBlock Text="Search"
VerticalAlignment="Center"
Margin="8,0,0,0" />
</StackPanel>
</Button>
<Button Margin="4"
Padding="4">
<ContentControl Style="{StaticResource Style-Icon-Find}" />
</Button>
</StackPanel>
And they look like:
Generally UI elements can be used once (or saying different - have only one parent) - this is probably why it only works for the first button in your case. One solution may be to define DataTemplate and use it as ContentTemplate, so each button creates its own icon:
<Page.Resources>
<DataTemplate x:Key="FindTemplate">
<SymbolIcon Symbol="Find" Foreground="White" />
</DataTemplate>
</Page.Resources>
...
<Button x:Name="tourNumLookup" ContentTemplate="{StaticResource FindTemplate}"
Grid.Column="1" Margin="10,0" VerticalAlignment="Center" />
<Button x:Name="customerIdLookup" ContentTemplate="{StaticResource FindTemplate}"
VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Margin="10,0" />
You don't need to create ControlTemplate to reuse the icon. You can simply put this SymbolIcon to the resource dictionary and use as StaticResource for the buttons' Content.
<Page.Resources>
<SymbolIcon x:Key="FindSymbol" Symbol="Find" Foreground="White" />
</Page.Resources>
<Button x:Name="tourNumLookup"
Content="{StaticResource FindSymbol}"
Grid.Column="1"
Margin="10,0"
VerticalAlignment="Center" />
<Button x:Name="customerIdLookup"
Content="{StaticResource FindSymbol}"
VerticalAlignment="Center"
Grid.Column="1"
Grid.Row="1"
Margin="10,0" />
UPDATE
BTW this is possibly a bug in the UWP platform, because I tried the following code and only the first Button rendered the icon at desing time and none of the at runtime.
<Page.Resources>
<SymbolIcon x:Key="FindSymbol" Symbol="Find" Foreground="White" />
<Style TargetType="Button" x:Key="LookupButton">
<Setter Property="Content" Value="{StaticResource FindSymbol}"/>
</Style>
</Page.Resources>
<StackPanel>
<Button x:Name="tourNumLookup"
Style="{StaticResource LookupButton}"
Margin="10,0"
VerticalAlignment="Center" />
<Button x:Name="customerIdLookup"
Style="{StaticResource LookupButton}"
VerticalAlignment="Center"
Margin="10,0" />
</StackPanel>
I tried to assign the Setter's Value directly but I got the same result. And also tried with FontIcon.

WrapPanel inside ListBox in UWP

I am looking to add WrapPanel inside my ListBox so that it's item wrap both vertically and horizentally. I was able to achieve this in Windows Phone 8 Sliverlight with Microsoft toolkit with below code;
Windows Phone 8
<ListBox x:Name="ListSection" ItemsSource="{Binding Section}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" ></toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="20">
<Image Source="{Binding ImagePath}" Width="80" Height="80"></Image>
<TextBlock Style="{StaticResource PhoneTextBlockBase}"
HorizontalAlignment="Center"
Foreground="Black"
Text="{Binding Header}"
FontWeight="Bold"
VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
I understand that Microsoft toolkit it not available in UWP, is there any possibility I could achieve such behavior in UWP?
UWP not working
<ListBox x:Name="ItemsListBox" ItemsSource="{Binding Section}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Stretch"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding ImagePath}" Width="80" Height="80"></Image>
<TextBlock HorizontalAlignment="Center"
Foreground="Black"
Text="{Binding Header}"
FontWeight="Bold"
VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thanks!
You must use ListView and ItemsWrapGrid as ItemsPanel
you can check the MSDN docs here with examples
https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.itemswrapgrid.aspx
This example is for GridView but is the same for ListView
<GridView>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
you can use the property Orientation to set your items vertically or horizontally.
There is a port of the Toolkit's WrapPanel for UWP in the project WinRTXamlToolkit.
You can get it from NuGet.
Then in your Page add this prefix:
xmlns:toolkit="using:WinRTXamlToolkit.Controls"
Now you can use <toolkit:WrapPanel Orientation="Horizontal" ></toolkit:WrapPanel> as it was before.
#ARH you need to create a custom Panel class which inherits panel class and override MeasureOverride and ArrangeOverride methods.check out following links for reference.
https://msdn.microsoft.com/en-us/library/windows/apps/mt228347.aspx
http://www.visuallylocated.com/post/2015/02/20/Creating-a-WrapPanel-for-your-Windows-Runtime-apps.aspx
The WrapPanel is available from the Microsoft UWP Toolkit.
Here's some sample code (using v5.0.0):
...
xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
...
<ListView
Name="WrapPanelContainer"
Width="310" Height="200"
Margin="0,40,0,0"
HorizontalAlignment="Left"
Background="LightBlue"
IsItemClickEnabled="True"
>
<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="MinWidth" Value="0"/>
<Setter Property="MinHeight" Value="0"/>
<Setter Property="Padding" Value="0"/>
</Style>
</ListView.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel VerticalSpacing="10" HorizontalSpacing="10" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<Rectangle Fill="Red" Width="100" Height="50"/>
<Rectangle Fill="Blue" Width="200" Height="50"/>
<Rectangle Fill="Green" Width="50" Height="50"/>
<Rectangle Fill="Yellow" Width="150" Height="50"/>
</ListView>
NOTE: The ListItemView style here removes superfluous padding, allowing the WrapPanel spacing properties to be the control points for layout.

How to have a WinRT flyout as a sidebar on the right?

I currently have the following xaml code to display a list of channels on the left of my interface when a button is clicked:
<Button Content="Channels" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="109">
<Button.Flyout>
<Flyout Placement="Left">
<Grid>
<TextBlock Text="Channels"
FontSize="45.333" FontFamily="Segoe WP Light"
TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Height="48" Width="200" FontWeight="Light" OpticalMarginAlignment="TrimSideBearings" TextReadingOrder="DetectFromContent"/>
<ScrollViewer Margin="0,53,0,54" ZoomMode="Disabled">
<ListView Margin ="10,0" ItemsSource="{Binding Channels}" Width="189" ItemTemplate="{StaticResource ChannelTemplate}" x:Name="channelListView" IsTapEnabled="False" IsRightTapEnabled="False" IsHoldingEnabled="False" IsDoubleTapEnabled="False" Height="715"/>
</ScrollViewer>
</Grid>
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
<Setter Property="MaxWidth" Value="200"/>
</Style>
</Flyout.FlyoutPresenterStyle>
</Flyout>
</Button.Flyout>
</Button>
Here's a screenshot:
However, When trying to use similar code for a list of users on the right of the interface, the users list does not appear on the right - it is on the left instead:
<Button Content="Users" Margin="281,0,10,0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="58">
<Button.Flyout>
<Flyout Placement="Right">
<Grid>
<TextBlock Text="Users"
FontSize="45.333" FontFamily="Segoe WP Light"
TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Height="48" Width="200" FontWeight="Light" OpticalMarginAlignment="TrimSideBearings" TextReadingOrder="DetectFromContent"/>
<ScrollViewer Margin="0,53,0,54" ZoomMode="Disabled">
<ListView Margin ="10,0" ItemsSource="{Binding Channels}" Width="189" ItemTemplate="{StaticResource ChannelTemplate}" x:Name="usersListView" IsTapEnabled="False" IsRightTapEnabled="False" IsHoldingEnabled="False" IsDoubleTapEnabled="False" Height="715"/>
</ScrollViewer>
</Grid>
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
<Setter Property="MaxWidth" Value="200"/>
</Style>
</Flyout.FlyoutPresenterStyle>
</Flyout>
</Button.Flyout>
</Button>
A screenshot of the users list
Is there something I need to do other than <Flyout Placement="Right">? If so, what?

StackPanel Orientation stops page load

First to explain what I am doing here, I want to create a page that list a large number of grouped objects. Selecting an object binds that information to a display on the left. Everything works fine till I change the MainStack Orientation to Horizontal. Once that is changed the page no longer loads. No errors are thrown. When stepping through the process the code behind steps through as it should.
I know its the XAML but am baffled by the cause. It works fine under two circumstances.
If I drop the mainstack stack panel and instead make the display group the header of the GridView it works.
If I put the MainStack orientation to Vertical it loads fine.
Here is the code that does not load:
<StackPanel Name="MainStack" Orientation="Horizontal" Grid.Row="2" >
<StackPanel Name="Stack" Width="480" >
<TextBlock Text="{Binding Nname}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
<TextBlock Text="{Binding Nset}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
<Image Source="{Binding url}" Height="Auto" Margin="0,0,102,55" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
<ScrollViewer Margin="0,0,0,0" MaxHeight="200">
<TextBlock Text="{Binding Nruling}" Margin="0,0,0,0" Style="{StaticResource BodyTextBlockStyle}"/>
</ScrollViewer>
</StackPanel>
<SemanticZoom x:Name="semanticZoom" Width="Auto" >
<SemanticZoom.ZoomedOutView>
<GridView Foreground="White"
ScrollViewer.IsHorizontalScrollChainingEnabled="False">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Group.Key}"
FontFamily="Segoe UI" FontWeight="Light" FontSize="24" />
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid ItemWidth="100" ItemHeight="100" MaximumRowsOrColumns="4"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="4" />
<Setter Property="Padding" Value="10" />
<Setter Property="Background" Value="#FF25A1DB" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
</Style>
</GridView.ItemContainerStyle>
</GridView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
TabIndex="1"
Padding="120,126,120,50"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionMode="Single"
ScrollViewer.IsHorizontalScrollChainingEnabled="False" SelectionChanged="itemGridView_SelectionChanged">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="8" GroupHeaderPlacement="Top" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Height="110" Width="480" Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
<Image Source="{Binding url}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Nname}"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Nname}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Nset}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Nruling}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="52,0,0,2"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Margin="10">
<TextBlock Text='{Binding Key}' Foreground="{StaticResource ApplicationForegroundThemeBrush}" FontSize="25" Margin="5" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<!-- Horizontal scrolling grid -->
</StackPanel>

Windows Store App - XAML - Why is the Textblock is bigger the StackPanel?

I have the below XAML and it does not do what I expect it to do.
<StackPanel Background="{Binding EwsColour}" Visibility="{Binding EwsVisibility}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<TextBlock Text="EWS" Style="{StaticResource SubheaderTextBlockStyle}" VerticalAlignment="Top" FontWeight="SemiBold" HorizontalAlignment="Center" />
<TextBlock Text="18" Style="{StaticResource SubheaderTextBlockStyle}" FontWeight="SemiBold" FontSize="100" />
</StackPanel>
I end up with this
I don't understand why the TextBlock that has 18 in, is growing bigger then then StackPanel. Can anyone tell me why?
After seeing Chris W''s comment I checked the Style in generic.xaml.
<Style x:Key="SubheaderTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
<Setter Property="FontSize" Value="26.667"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="LineHeight" Value="30"/>
</Style>
I had no idea that there was a LineHeight property. Overriding it so that its the same as the font size (or bigger actually creates a better UX) stops this from happening.
<StackPanel Background="{Binding EwsColour}" Visibility="{Binding EwsVisibility}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<TextBlock Text="EWS" Style="{StaticResource SubheaderTextBlockStyle}" VerticalAlignment="Top" FontWeight="SemiBold" HorizontalAlignment="Center" />
<TextBlock Text="18" Style="{StaticResource SubheaderTextBlockStyle}" FontWeight="SemiBold" FontSize="100" LineHeight="110" />
</StackPanel>