combobox windows phone 8.1 no dropdown - xaml

I add a ComboBox in XAML for Windows Phone 8.1 in a StackPanel. On Running the app in the Emulator no Dropdown functionality is shown. If I Limit the StackPanel to a Height e.g. "70", only the 2 first Items are shown. If I say Height = "Auto" then all Items are shown immediately.
How can I enable the Dropdown functionality?
Header:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Combobox ..
<StackPanel Grid.Row="4" Width="350" HorizontalAlignment="Left">
<TextBlock x:Name="PlayerListPanel" TextWrapping="Wrap" Text="Select a Player" VerticalAlignment="Center" Margin="2,0,0,0" HorizontalAlignment="Left"/>
<ComboBox Name="StartPlayerComboBox" BorderThickness="1" >
<ComboBoxItem Tag="PLAYER1">Player 1</ComboBoxItem>
<ComboBoxItem Tag="PLAYER2">Player 2</ComboBoxItem>
<ComboBoxItem Tag="PLAYER3">Player 3</ComboBoxItem>
<ComboBoxItem Tag="Dummy1">1</ComboBoxItem>
<ComboBoxItem Tag="Dummy2">2</ComboBoxItem>
<ComboBoxItem Tag="Dummy3">3</ComboBoxItem>
</ComboBox>
</StackPanel>

Try LISTPICKER control..Its functions similar as ComboBox with Auto adjusting height and width..
<toolkit:ListPicker>
<toolkit:ListPickerItem Content="A+" />
<toolkit:ListPickerItem Content="B+" />
<toolkit:ListPickerItem Content="O+" />
</toolkit:ListPicker>
to use this Include following namespace in Xaml Page..ADD windows phone toolkit(click it)
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;
assembly=Microsoft.Phone.Controls.Toolkit"
if further info requires... revert back...

You should provide enough height for the combobox to open properly. If you limit the height, the combobox cannot extend beyond that. So it will show only a few items. Height = "Auto" means it can take whatever height as required by it. Thus the combobox will take the height required for it to open properly.

Combobox is Windows Phone/ Windows RunTime Environment behaves differently from its Silverlight/WPF Counterparts. Here we don't have Popup to show the List of items to be selected. Hence the dropdown needs enough space to show the options.
Best thing is to leave the Height as Auto, or MinWidth for any Width requirements.

Even tho, this is an old question, in addition to what they have said, already; a way to have an item selected as the default, you need to "mark it" as follow:
<ComboBoxItem IsSelected="True">Item 1</ComboBoxItem>
Then, once you click on it, you will have all other combo box items displayed (if you define them):
<ComboBox x:Name="myComboBox" VerticalAlignment="Top" Width="350" FontFamily="open sans" FontSize="20" Height="Auto" Foreground="DarkGray" BorderBrush="Black">
<ComboBoxItem IsSelected="True">Item 1</ComboBoxItem>
<ComboBoxItem>Item 2</ComboBoxItem>
<ComboBoxItem>Item 3</ComboBoxItem>
<ComboBoxItem>Item 4</ComboBoxItem>
</ComboBox>
Hope it helps someone. Regards

Related

How to change the width of a control dynamically in UWP?

Tabbar is a very common navigation control on iOS and Android. But UWP doesn't seem to have.
I've seen an example XamlPivot(SHORTCUT)①, Use Pivot to make TabBar, The effect is very good, and I tried to modify it, so that the TabBar in the bottom, content in the upper.
My project is MasterDetail, Master part is TabBar(i.e TabsStyle Pivot), Detail part just a blank.
Now I found a big problem, TabBar each item does not automatically divide the width, then I try to use data binding and value converters to dynamically provide the width, the binding source is the ActuallyWidth of the MasterGrid, but the ActuallyWidth does not change with the window size, and when the Window on WideState, the Mater part will become blank.
So, How to change the width of the TabBarItem dynamically?
Various window size effect chart(Remove"()"):
(https:)//i.stack.imgur.com/3GE5t.png
(https:)//i.stack.imgur.com/FyQuX.png
(https:)//i.stack.imgur.com/pChwz.png
(https:)//i.stack.imgur.com/cib1l.png
XAML:
<Pivot x:Name="pivot"
Style="{StaticResource TabsStylePivotStyle}">
<PivotItem>
<PivotItem.Header>
<local:TabHeader Width="{Binding ActualWidth, Converter={StaticResource AutoWidthConverter}, ElementName=pivot, Mode=OneWay}"
Glyph=""
Label="item 1" />
</PivotItem.Header>
<TextBlock Text="Content content content" />
</PivotItem>
<PivotItem>
<PivotItem.Header>
<local:TabHeader Width="{Binding ActualWidth, Converter={StaticResource AutoWidthConverter}, ElementName=pivot, Mode=OneWay}"
Glyph=""
Label="item 2" />
</PivotItem.Header>
<TextBlock Text="Content content content" />
</PivotItem>
<PivotItem>
<PivotItem.Header>
<local:TabHeader Width="{Binding ActualWidth, Converter={StaticResource AutoWidthConverter}, ElementName=pivot, Mode=OneWay}"
Glyph=""
Label="item 3" />
</PivotItem.Header>
<TextBlock Text="Content content content" />
</PivotItem>
</Pivot>
Converter:
public object Convert(object value, Type targetType, object parameter, string language)
{
return (double)value / 3;
}
For the record, ActualWidth is NOT a DependencyProperty in UWP XAML model - so can't participate in bindings properly (it doesn't notify of changes).
So if you wish to do a binding like you're doing, you're going to need to expose ActualWidth in a bindable way. One of the easier ways of doing so is to a create a Behaviour explicitly for that, that attaches to the SizeChange event of the target element (in your case the pivot), and returns it's ActualWidth / ActualHeight / RenderSize as DependencyProperties on the behaviour. Your TabItems would then look to the ActualWidth on the behaviour instead.
(It's not done by default presumably because UWP XAML doesn't have read-only dependency property support, and binding too it can easily lead to circular layout cycles when layout rounding is in play if you're not careful)

XAML: MouseLeftButtonUp only fires when clicking text, not whitespace

I have a list box (in Silverlight) that uses a DataTemplate for the ItemTemplate. The DataTemplate is defined like this:
<DataTemplate>
<StackPanel Orientation="Horizontal"
MouseLeftButtonUp="RoleStackPanel_MouseLeftButtonUp"
Tag="{Binding}">
<TextBlock Name="roleItem"
Text="{Binding Path=DisplayValue, Mode=TwoWay}"/>
</StackPanel>
</DataTemplate>
I have found that my event RoleStackPanel_MouseLeftButtonUp only fires if any text displayed in the TextBlock is clicked. If the user clicks any whitespace in the item to the right of the text, the event does not fire. So lets say the control is 300px wide but only has the word "Admin" in the item, you MUST click "Admin" and not to the empty whitespace to the right.
How can I make it so the events fires wherever I click in the item, on text or whitespace?
So a couple quick considerations to get you sorted.
a.) The area of your panel does not have HitTestVisibility by default. This is by design and intentional. To get your event to fire for the parent simply add the property of IsHitTestVisible="True" or provide a Brush for the panel via Background="Transparent" to it to invoke HitTestVisibility.
b.) A StackPanel will only consume the space required by its children. If you wish to provide a large area for a user to hit like you describe than swap the StackPanel for Grid which should consume whatever space is made available by its parent. Same rules of HitTestVisibility apply.
<DataTemplate>
<Grid IsHitTestVisible="True"
MouseLeftButtonUp="RoleStackPanel_MouseLeftButtonUp"
Tag="{Binding}">
<TextBlock Name="roleItem"
Text="{Binding Path=DisplayValue, Mode=TwoWay}" />
</Grid>
</DataTemplate>
Hope this helps, cheers!

Textbox has to be clicked on the first line to activate cursor in XAML

I have a TextBlock and TextBox wrapped within a grid. It's purpose is to allow users to add notes to a task that they are assigned to.
When adding a note to a task, unless the first line of the notes field is clicked in. The notes field does not appear to become active and appears to be read only. The operator should be able to click anywhere in the notes boundary and the field become active.
I thought it might have been something to do with "rowspan" or the binding I have but they seem to be fine.
Any ideas?
<!--Notes-->
<TextBlock
Grid.RowSpan="2"
Text="Notes"
FontWeight="Bold"
Margin="0 5 0 0" />
<TextBox
x:Name="UxNotesField"
Grid.Row="5"
Text="{Binding TaskAction.Notes, Mode=TwoWay, Converter={StaticResource EmptyStringToNullConverter}}"
AcceptsReturn="True"
MaxHeight="200"
TextWrapping="Wrap"
TextChanged="TextBox_TextChanged"
Margin="0 0 5 5"
sec:PermissionsAssistant.PermissionKeysProperty="EditNotesField" />

Empty collection bound to LongListSelector cause incorrect view of page

I have Windows Phone 8 page which has a number of controls on it, some of them are LongListSelector controls. If all collections have content everything is displayed correctly.
But if any of the collections bound to the lists are empty all controls below them on the page disappear, i.e. the page looks to be truncated as lots of things are missing.
If I add code to make sure to add at least on item to each collection the page display correctly.
The databinding is done using C#, as shown below.
XAML
<phone:LongListSelector Grid.Row="3" x:Name="PicturesGrid">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Image Source="{Binding Filename}" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
C#
PicturesGrid.ItemsSource = App.ViewModel.SelectedBird.Pictures;
Update: I have noticed that there is a scrollbar present, but however much I scroll I never get down to the bottom.

Xaml, How to bind a list of buttons over an image in different coordination

For a windows 8 Apps, i need to put a list of buttons over an image. Each button has CoordinateX and CoordinateY properties. I use a gridView to bind to the list of buttons.
I need to have the result as below:
Here is my code:
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" >
<Canvas>
<Image Source="ms-appx:///Assets/red.png" Stretch="None" ></Image>
<GridView ItemsSource="{Binding Buttons}"
SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="Button" Padding="0">
<GridView.ItemTemplate>
<DataTemplate>
<Button Width="194" Height="51" Background="Gray" Canvas.Left="{Binding CoordinateX}" Canvas.Top="{Binding CoordinateY}"></Button>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Canvas>
</Grid>
But this is what i get after running the app:
Ites Likely that at runtime before the X and Y co-ordinates can be set for the items within the GridView, the GridView itself has its properties applied.
Since
1) the GridView is intended to be used for oganization control
and
2) you havent forced the Grid to fill the view space
what you're left with is a GridView that acts as it wishes and limits the ability of its items to conform to your style, should the style attempt to force the items collection to live outside the bounds of the control.
You could try to set the GridView's Horizontal Alignment property but even if it happens to work, its probably a better bet to use a less organized content control like the more basic ItemsPresenter.
Which ever control you end up using... make sure to check for /set the HorizontalContentAlignment & VerticalContentAlignment properties if they exist.