Xamarin.Forms UWP custom icon for the secondary ToolBarItems button - xamarin

Is there a way to customize the "3-dot" button, that shows the Secondary ToolBarItem list in Xamarin.Forms UWP app?
It is possible to do so for iOS and Android, using the custom renderers. However, I was not able to locate the corresponding UIElement from the UWP custom renderer class.
Any ideas of how to access the button and change its appearance (particularly, change the icon)?

Derive from source code, Xamarin toolbar will be rendered as CommandBar within UWP platform. If you want to edit three dot. the easy way is edit the default UWP CommandBar style, find the MoreButton button element, and replace FontIcon glyph property value with you want. The following is CommandBar segment style that replace the three dot with heart.
<Button
x:Name="MoreButton"
Grid.Column="1"
MinHeight="{ThemeResource AppBarThemeCompactHeight}"
Padding="{ThemeResource CommandBarMoreButtonMargin}"
VerticalAlignment="Top"
Control.IsTemplateKeyTipTarget="True"
Foreground="{TemplateBinding Foreground}"
IsAccessKeyScope="True"
Style="{StaticResource EllipsisButtonRevealStyle}"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CommandBarTemplateSettings.EffectiveOverflowButtonVisibility}">
<FontIcon
x:Name="EllipsisIcon"
Height="15"
VerticalAlignment="Top"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="15"
Glyph="" />
</Button>
There are many icons that you can customize. You can refer to Segoe Fluent Icons font
Note: You need to the set the margin of the FontIcon to adjust the icon vertically and horizontally centered.

Related

How to create and run animation for RadSlideView item in WP7?

I have an image in Telerik slideView control and a Button on the AppBar. When AppBar Button is tapped I change image source of the active Image. Everything works well but I need an Animation for changing image source. I'm using MVVMlight. Coul anybody help me with animation image appearance by tap on appBar button. Any information would be useful.
<telerikPrimitives:RadSlideView
x:Name="slideView"
ItemsSource="{Binding Covers}"
SelectedItem="{Binding CurrentCover ,Mode=TwoWay}"
ItemRealizationMode="ViewportItem" >
<telerikPrimitives:RadSlideView.ItemTemplate>
<DataTemplate>
<Image x:Name="DisplayImage" Source="{Binding FullCover}">/Image>
</DataTemplate>
</telerikPrimitives:RadSlideView.ItemTemplate>

How to change the font size of title property of a hubtile

i am using the hubtile control from the Microsoft.Phone.Controls.Toolkit
the xaml code for it is
<toolkit:HubTile x:Name="hub" Margin="12,12,0,0"
Title="{Binding Title}"
Message="{Binding Message}"
Source="{Binding Image}"
GroupTag="BindingHubTile" Tap="HubTile_Tap_1">
</toolkit:HubTile>
how to change the font size of the title property so that the whole title fits in?
You can't do this.
One way is find HubTile class and change default font size.
Download "Auto Scaling TextBlock for Silverlight" class and include it in your project.
Modify the ControlTemplate of the HubTile control to use the AutoScalingTextBlock instead of just TextBlock for title.

Hide Drop-down arrow in combo-box Windows 8

How to disable Drop-down arrow in combo-box in Metro-style app(Windows 8)
If you permanently want to disable it, just edit the ControlTemplate. You can remove this, the popup... or do a variety of other basic template edits to cause it to not to function anymore.
In particular, the named entity DropDownGlyph:
<TextBlock x:Name="DropDownGlyph" Grid.Column="1"
Foreground="{StaticResource ComboBoxArrowForegroundThemeBrush}"
FontWeight="Bold"
FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
FontFamily="{StaticResource SymbolThemeFontFamily}"
HorizontalAlignment="Right" IsHitTestVisible="False"
Margin="0,0,6,4" Text=""
VerticalAlignment="Center"/>
If it's a temporary thing, given your scenario of wanting to toggle, then the easiest would be to use two controls, a TextBlock and a ComboBox. Toggle the Visibility (using The BooleanToVisibilityConverter and BooleanNegationConverter which is included in many of the VS2012 templates) based on another property (such as ShowAsComboBox). Bind both the TextBlock and the ComboBox to the same property. As long as both controls share a common parent and location, it should look fine.

Scrollviewer & SIP Issue (WP7.5 Mango)

I am working on an application which includes a registration form. The form contains multiple text entry boxes, and so a ScrollViewer is used to allow them all to be displayed on one page.
The following is a stripped down example of the XAML code I am using:
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="SCROLLVIEWER TEST" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="registration" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<ScrollViewer Grid.Row="1">
<StackPanel>
<TextBlock Text="Hello" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello1" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello2" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello3" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello4" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello5" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello6" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello7" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello8" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="END" Margin="12,0,0,0"/>
<TextBox />
</StackPanel>
</ScrollViewer>
</Grid>
(Note that the ScrollViewer is inside a grid cell, which means that the title panel should stay OnScreen at all times)
The scrolling works perfectly fine, so that is not an issue. However, when the user selects a TextBox to enter data (i.e. the soft keyboard opens), the system pushes the content of the entire page around (including the registration title panel), which is not expected behaviour.
[See the People app on Windows Phone and try adding a new contact. This contains a similar structure, but the ScrollViewer behaves correctly by only pushing content in the scrollviewer up]
Test Cases
Select a TextBox that is visible near the top of the screen, to open the keyboard.
Attempt to scroll to the bottom of the page with keyboard open.
Items at the bottom of the page are unreachable.
or
Select a TextBox that is visible near the bottom of the screen.
Content of entire page is pushed up.
Attempt to scroll to the top of the page with keyboard open.
Items at the top of the page are unreachable, and title panel never comes back into view until keyboard is closed.
Any help on resolving this issue would be appreciated. Thanks.
The problem is that the ScrollViwer height is not modified after the keyboard appears so it becomes clipped. One solution would be to modify the height of the scrollviwer (according to the keyboard height) and then reposition it (this might give you some headaches).
Another problem is knowing when the keyboard appears - you could register for the GotFocus/LostFocus events on all your TextBoxes but it's not a great solution. This might help you: http://blogs.msdn.com/b/jaimer/archive/2010/11/05/guessing-if-the-sip-is-visible-in-a-windows-phone-application.aspx
Hope this helps a little :)
I think you can solve this by coming at the problem from another angle. The phone will scroll up the page so that the SIP (software keyboard) never covers up the TextBox which has focus.
However you can force the SIP to hide by detecting touch events on the top element contained in your ScrollViewer, e.g.:
<ScrollViewer Grid.Row="1">
<StackPanel ManipulationDelta="OnScrollViewerGridManipulationDelta">`
Then, by giving the focus to a hidden button (0x0 pixels in size) this will force the SIP to close. Then it will be possible for your users to scroll up and down the scrollviewer as expected...
private void OnScrollViewerGridManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
{
// This will hide the SIP if it is currently showing.
// We can't do this directly, but we can force this by taking focus away from any of the TextBoxes that may have it.
this.hiddenButton.Focus();
}
I've had the same issue with an app I've developed and the way I dealt with it was to find out the auto height of the panel containing the input textboxs and then manually set the height and add approximately 400 - 500 px to the bottom to make it scroll nicely. The effect is quite smooth and will not make your UI look "hackish" IMHO.
In your case you will have to find out the automatic height of the LayoutRoot Grid and then on RowDefinitionof Row 1 set the height manually - remembering to add an extra 400px (or whatever looks appropriate in your situation).
For ease of input I then handled each OnKeyDown event of each TextBox to change the focus to the next TextBox upon hitting Enter. On the last TextBox I set the focus to this.focus() which sets focus to the Page and hides the SIP.
Have a look at my small library please - https://siphelper.codeplex.com/
It modifies height of scrollviewer and content can be scrolled to the topmost/bottommost point.
If you have any suggestions - feel free to contact me.

WP7 AutoCompleteBox Popup position

The toolkit:AutoCompleteBox in WP7 "opens" the Popup with results above the textfield. I need this Popup to be below the TextBox.
Wasted hours on this. finally, i've written my own autoCompleteBox with a ListBox opening below.
Just out of curiosity, pleas tell me how it shold be with the "original" one
I faced the same issue and this is how I solved it, using Perspective Transforms and RenderTransform in the borders of Popup in the default template.
<Popup>
<Grid>
<Border>
<Border.Projection>
<PlaneProjection GlobalOffsetX="-10" GlobalOffsetY="37" CenterOfRotationY="1" CenterOfRotationX="0" RotationX="180"/>
</Border.Projection>
<Border>
<Border.Projection>
<PlaneProjection RotationX="-180"/>
</Border.Projection>
<ListBox/>
</Border>
</Border>
</Grid>
</Popup>
Change GolbalOffsetX and GlobalOffsetY according to your textbox height and width.
There is no default property that will define the location for the popup in the AutoCompleteBox control.

Resources