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.
Related
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.
I have two buttons. One is an edit button that when clicked allows the editing of other objects on the page. My hope is to have the second button appear only once this "edit state" has been initiated. That part isn't very difficult. However, I don't want to just alter the 1st button's alignment from right to left to make space for the 2nd button (a cancel button) to the 1st button's right - I want to animate this movement, as if to make it appear that the moving of the 1st button to the left, is uncovering the 2nd button.
I've been searching for hours trying to find out how to do this, and there's a multitude of options for WPF, but not many solutions for UWP applications.
So far, I've found this:
<Button x:Name="EoIdButton" Grid.Row="0" Grid.Column="2" view:EventHandlers.Attach="Click" BorderBrush="DarkGray" FontFamily="Segoe MDL2 Assets" Content="{Binding EoIdButtonContent, Mode=TwoWay, Converter={StaticResource SegoeConverter}}" Style="{StaticResource CircleButtonStyle}" Visibility="{Binding EoVis, Mode=TwoWay, Converter={StaticResource BooleanToVisibilityConverter}}">
<interactivity:Interaction.Behaviors>
<core:DataTriggerBehavior Binding="{Binding SomeProperty, Mode=TwoWay}">
<core:ChangePropertyAction></core:ChangePropertyAction>
</core:DataTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Button>
So, while I can change a property using this, I don't see how to create an animation. My guess, based on my searching would be to use a Storyboard, but again, most of the solutions I've found pertain to WPF and/or don't work because the scenario is too different. If someone has a solution for this, it'd be great.
For additionaly clarity
I have button 1:
(EditButton)
When (EditButton) is clicked, I want edit button to rendertransform/animate left and the result to look like so:
(EditButton)(CancelButton)
When either edit button or cancel button are clicked, I want it to return to the original state
I am trying to create a menu (currently a ListBox containing Images) for an app (WP8 specifically, but general principal will be the same for other environments) with the behavior determined by the initial part of each gesture:
dragging/swiping the menu left or right will cause the menu to scroll left or right
dragging an item up from the menu (which is at bottom of screen) will allow it to be detached (or recreated) and placed in another container.
Roughly speaking, I understand how to drag-and-drop the element, and to make a side-scrolling menu, but I am having difficulties in putting the two together and determining whether to be in "menu scroll" mode, or "drag and drop" mode, and how to switch between the two programmatically.
<ListBox Height="100"
ItemsSource="{Binding}"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
Grid.Row="1"
Name="MainMenuPicker">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal">
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Path=Source}" Tap="Image_Tap"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Currently, horizontal scrolling is taken care of by ScrollViewer.HorizontalScrollBarVisibility="Auto"
I attempted to have a ManipluationStarted, ManipulationDelta etc to determine direction of gesture, but didn't get very far. I currently have a Tap event handler on the Image that moves moving to another parent container.
Questions:
1. How can I determine if a gesture is a side-to-side movement on the menu (ListBox) as a whole, or a drag (upwards) of an Image within the ListBox?
How can I programmatically set each case so that the functionality behaves as described?
Thanks in advance!
In this case you need to use Flick events,and use HorizaltalVelocity and vertcalvelocity to detect and distinguish between left-right and top-down swipes.
check this sample for better understanding
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.
Just started with developing for WP7 and came across the following. I have a pivot application with a few pivotitems. On the first pivotitem (see code below) I want to be able to adjust a lot of settings. For this question all items to be set are called 'TextBox' and the choice in the ListPicker is either A,B or C.
Now if I do NOT use the ScrollViewer and I tap any of the listpickers I get to see all three options BUT I can not scroll through all listpickers.
If I DO use the ScrollViewer, I CAN see all listpickers but only the top one (that's visible) will expand and give me the options A,B and C, they others stay collapsed.
How can I get every listpicker to expand and show me the avaiable options AND be able to scroll to every listpicker on the page?
PS In code below copy the stackpanel between start and end about 15 times.
Thanks in advance for any help!
<controls:PivotItem Header="blabla">
<ScrollViewer>
<StackPanel Margin="0,0,36,0" VerticalAlignment="Top" d:LayoutOverrides="Width">
// start
<StackPanel Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Text="TextBox" Width="80" TextAlignment="Right" Margin="10,22,20,0" HorizontalAlignment="Right" VerticalAlignment="Top" />
<toolkit:ListPicker Margin="0" Width="275">
<toolkit:ListPickerItem Content="A"/>
<toolkit:ListPickerItem Content="B"/>
<toolkit:ListPickerItem Content="C"/>
</toolkit:ListPicker>
</StackPanel>
// end - copy/paste code code between start and end about 15 times right here
</StackPanel>
</ScrollViewer>
</controls:PivotItem>
This is, apparently, a common issue with Listpicker and ScrollViewer. You can find a workaround here
Should anybody stumble upon this, this has been fixed since the november 2011 release of the wP7 silverlight toolkit.