I'm just getting started working with XAML using VS2013 and Windows Phone SDK 8. I've got a HubSection with a few ComboBox controls in a Grid. When you open a ComboBox dropdown, it shows controls in the dropdown that should be behind it.
Any suggestions on how to fix this? Even if I can open the dropdown separately (I have another ComboBox with 13 items that will show full-screen automatically if it is opened).
Thanks for any help.
screenshot http://i112.photobucket.com/albums/n182/capellanx/wp_ss_20140704_0002_zps877f0a6a.jpg
<HubSection x:Uid="CharacterInfo" Header="Character Information" DataContext="{Binding Groups}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
<DataTemplate>
<Grid>
<TextBlock HorizontalAlignment="Left" Margin="10,0,0,0" TextWrapping="Wrap" Text="Character Name:" VerticalAlignment="Top" FontSize="18"/>
<TextBox HorizontalAlignment="Left" Margin="10,20,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="321" Height="10"/>
<TextBlock HorizontalAlignment="Left" Margin="10,60,0,0" TextWrapping="Wrap" Text="Breed:" VerticalAlignment="Top" FontSize="18"/>
<ComboBox HorizontalAlignment="Left" Margin="10,80,0,0" VerticalAlignment="Top" Width="321">
<ComboBoxItem Tag="HOMID" IsSelected="True">Homid</ComboBoxItem>
<ComboBoxItem Tag="METIS">Metis</ComboBoxItem>
<ComboBoxItem Tag="LUPUS">Lupus</ComboBoxItem>
</ComboBox>
<TextBlock HorizontalAlignment="Left" Margin="10,150,0,0" TextWrapping="Wrap" Text="Auspice:" VerticalAlignment="Top" FontSize="18"/>
<ComboBox HorizontalAlignment="Left" Margin="10,170,0,0" VerticalAlignment="Top" Width="321">
<ComboBoxItem Tag="RAGABASH" IsSelected="True">Ragabash (New Moon)</ComboBoxItem>
<ComboBoxItem Tag="THEURGE">Theurge (Crescent Moon)</ComboBoxItem>
<ComboBoxItem Tag="PHILODOX">Philodox (Half Moon)</ComboBoxItem>
<ComboBoxItem Tag="GALLIARD">Galliard (Gibbous Moon)</ComboBoxItem>
<ComboBoxItem Tag="AHROUN">Ahroun (Full Moon)</ComboBoxItem>
</ComboBox>
<TextBlock HorizontalAlignment="Left" Margin="10,240,0,0" TextWrapping="Wrap" Text="Tribe:" VerticalAlignment="Top" FontSize="18"/>
<ComboBox HorizontalAlignment="Left" Margin="10,260,0,0" VerticalAlignment="Top" Width="321">
<ComboBoxItem Tag="BLACKFURIES" IsSelected="True">Black Furies</ComboBoxItem>
<ComboBoxItem Tag="BONEGNAWERS">Bone Gnawers</ComboBoxItem>
<ComboBoxItem Tag="CHILDRENOFGAIA">Children of Gaia</ComboBoxItem>
<ComboBoxItem Tag="FIANNA">Fianna</ComboBoxItem>
<ComboBoxItem Tag="GETOFFENRIS">Get of Fenris</ComboBoxItem>
<ComboBoxItem Tag="GLASSWALKERS">Glass Walkers</ComboBoxItem>
<ComboBoxItem Tag="REDTALONS">Red Talons</ComboBoxItem>
<ComboBoxItem Tag="SHADOWLORDS">Shadow Lords</ComboBoxItem>
<ComboBoxItem Tag="SILENTSTRIDERS">Silent Striders</ComboBoxItem>
<ComboBoxItem Tag="SILVERFANGS">Silver Fangs</ComboBoxItem>
<ComboBoxItem Tag="STARGAZERS">Stargazers</ComboBoxItem>
<ComboBoxItem Tag="UKTENA">Uktena</ComboBoxItem>
<ComboBoxItem Tag="WENDIGO">Wendigo</ComboBoxItem>
</ComboBox>
</Grid>
</DataTemplate>
</HubSection>
The problem is that the Controls are inside a Grid, this causes the Controls to overlay each other unless you use different rows/columns. But the easiest way to change this is to just use a StackPanel, which causes the elements to automatically stack horizontally or vertically. This means you don't need to use manual margins and alignments to get a nice layout.
Here is the modified XAML, I also added a ScrollViewer around to incase the ComboBox expands out of the view:
<HubSection x:Uid="CharacterInfo" Header="Character Information" DataContext="{Binding Groups}">
<DataTemplate>
<ScrollViewer>
<StackPanel>
<TextBlock TextWrapping="Wrap" Text="Character Name:" FontSize="18"/>
<TextBox TextWrapping="Wrap" Text="TextBox"/>
<TextBlock TextWrapping="Wrap" Text="Breed:" FontSize="18"/>
<ComboBox>
<ComboBoxItem Tag="HOMID" IsSelected="True">Homid</ComboBoxItem>
<ComboBoxItem Tag="METIS">Metis</ComboBoxItem>
<ComboBoxItem Tag="LUPUS">Lupus</ComboBoxItem>
</ComboBox>
<TextBlock TextWrapping="Wrap" Text="Auspice:" FontSize="18"/>
<ComboBox>
<ComboBoxItem Tag="RAGABASH" IsSelected="True">Ragabash (New Moon)</ComboBoxItem>
<ComboBoxItem Tag="THEURGE">Theurge (Crescent Moon)</ComboBoxItem>
<ComboBoxItem Tag="PHILODOX">Philodox (Half Moon)</ComboBoxItem>
<ComboBoxItem Tag="GALLIARD">Galliard (Gibbous Moon)</ComboBoxItem>
<ComboBoxItem Tag="AHROUN">Ahroun (Full Moon)</ComboBoxItem>
</ComboBox>
<TextBlock TextWrapping="Wrap" Text="Tribe:" FontSize="18"/>
<ComboBox>
<ComboBoxItem Tag="BLACKFURIES" IsSelected="True">Black Furies</ComboBoxItem>
<ComboBoxItem Tag="BONEGNAWERS">Bone Gnawers</ComboBoxItem>
<ComboBoxItem Tag="CHILDRENOFGAIA">Children of Gaia</ComboBoxItem>
<ComboBoxItem Tag="FIANNA">Fianna</ComboBoxItem>
<ComboBoxItem Tag="GETOFFENRIS">Get of Fenris</ComboBoxItem>
<ComboBoxItem Tag="GLASSWALKERS">Glass Walkers</ComboBoxItem>
<ComboBoxItem Tag="REDTALONS">Red Talons</ComboBoxItem>
<ComboBoxItem Tag="SHADOWLORDS">Shadow Lords</ComboBoxItem>
<ComboBoxItem Tag="SILENTSTRIDERS">Silent Striders</ComboBoxItem>
<ComboBoxItem Tag="SILVERFANGS">Silver Fangs</ComboBoxItem>
<ComboBoxItem Tag="STARGAZERS">Stargazers</ComboBoxItem>
<ComboBoxItem Tag="UKTENA">Uktena</ComboBoxItem>
<ComboBoxItem Tag="WENDIGO">Wendigo</ComboBoxItem>
</ComboBox>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</HubSection>
Related
I have a ListView defined like this:
<ListView x:Name="phonesListView"
Grid.Row="5"
Background="Black"
IsItemClickEnabled="True"
Foreground="Gray" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid>
<Border x:Name="myback" Background="Transparent">
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="20, 0, 20, 0"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="auto" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid
Grid.Row="0">
<Grid.ColumnDefinitions >
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ComboBox
Grid.Column="0"
VerticalAlignment="Center"
Background="Black"
Foreground="White" >
<ComboBoxItem Content="Home" IsSelected="True"/>
<ComboBoxItem Content="Work"/>
<ComboBoxItem Content="Office"/>
<ComboBoxItem Content="Fax"/>
<ComboBoxItem Content="School"/>
</ComboBox>
<Button
Grid.Column="1"
Height="30"
Width="30"
Foreground="Black"
Margin="0, 5, 0, 5"
HorizontalAlignment="Center" Click="RemovePhone">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Assets/appbar.close.png" />
</Button.Background>
</Button>
</Grid>
<TextBox
Grid.Row="1"
Background="White"
Foreground="Black"
FontSize="18"
Text="{Binding Number}"
InputScope="TelephoneNumber" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In code i have attribute:
ObservableCollection<Phone> phones = new ObservableCollection<Phone>();
Everything works fine, I can add and delete items in list view by either
phones.Add or phones.Remove
The problem is for when I'm leaving a page or Save button is pressed the count of this collections is exactly it is supposed to be but there are no data i have filled in input field. Could you help me with that? Thanks.
If you want that the edited data in your ListView flows back to the items so you can save the edits, you'll have to use 2-way binding. When the control (in the sample below your TextBox) loses focus, the value of Text property gets stored back into the bound field (in your sample Number).
<TextBox
Grid.Row="1"
Background="White"
Foreground="Black"
FontSize="18"
Text="{Binding Number, Mode=TwoWay}"
InputScope="TelephoneNumber" />
For more details about binding, read the MSDN article.
<ComboBox
Foreground="Black"
BorderBrush="Black"
HorizontalAlignment="Left" Margin="108,280,0,0" VerticalAlignment="Top" Width="200" Style="{StaticResource ComboBoxStyl}"><ComboBoxItem Content="One" IsSelected="True" Style="{StaticResource ComboBoxItemStyle1}"/>
<ComboBoxItem Content="Two" Style="{StaticResource ComboBoxItemStyle1}"/>
<ComboBoxItem Content="Three" Style="{StaticResource ComboBoxItemStyle1}"/>
<ComboBoxItem Content="Four" Style="{StaticResource ComboBoxItemStyle1}"/>
<ComboBoxItem Content="Five" Style="{StaticResource ComboBoxItemStyle1}"/>
</ComboBox>
Here I have referred to Style sheet for Every ComboBoxItem. I want to refer to stylesheets only once(with respect to ComboBoxItem).So that styles will be applied automatically when a dynamic data item is added to it.
You'll want to use something like this:
<ComboBox x:Name="combobox1" ItemsSource="{Binding ItemList}">
<ComboBox.ItemTemplate>
<DataTemplate>
<!-- define data template and/or style, example: -->
<TextBlock Style="{StaticResource TextBlockItemStyle}" Text="{Binding ItemText}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Also, since you want to add/remove items dynamically, it'd be better to bind the items source to a list or collection which you can easily edit in c#. You might want to create a class like:
public class ComboBoxListItem
{
public string ItemText {get; set;}
//any other useful property
}
Then in your page create a List<ComboBoxListItem> ItemList and in the page's constructor, initialize the list with whatever data you want to. Then in your XAML DataTemplate, simply insert "{Binding ItemText}" wherever you want the text to appear (like I've done in the text block).
<ComboBox
SelectedIndex="0"
Foreground="Black"
ItemContainerStyle="{StaticResource ComboBoxItemStyle1}"
BorderBrush="Black"
HorizontalAlignment="Left" Margin="108,280,0,0" VerticalAlignment="Top" Width="200" Style="{StaticResource ComboBoxStyl}">
<ComboBoxItem Content="One" />
<ComboBoxItem Content="Two" />
<ComboBoxItem Content="Three" />
<ComboBoxItem Content="Four" />
<ComboBoxItem Content="Five" />
</ComboBox>
Using the "ItemContainerStyle" refering to the sylesheet we created for ComboBoxItems we can easily change the Styles of ComboBoxItems whether it is declared statically or dynamically.
Are there perhaps any shorter ways of writing this, like using the property ItemTemplate in the ComboBox declaration? I hate looking at my code and seeing this big blob of code.
<ComboBox Grid.Row="0" Grid.Column="1" Margin="3" ItemsSource="{Binding Accounts}" SelectedItem="{Binding SelectedAccount}" >
<ComboBox.ItemTemplate>
<DataTemplate>
<ComboBoxItem Content="{Binding Name}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
If you only want to display the Name of the items you can use the DisplayMemberPath-Property of the ComboBox. Then you define the ComboBox as:
<ComboBox Grid.Row="0"
Grid.Column="1"
Margin="3"
ItemsSource="{Binding Accounts}"
SelectedItem="{Binding SelectedAccount}"
DisplayMemberPath="Name"/>
Sorry.. my english is so bad :'(
I wrote a messy xaml codes
<ScrollViewer>
<ItemsControl x:Name="REST0029" ItemsSource="{Binding MenuOfWeek}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding DayOfWeek}" />
<ItemsControl ItemsSource="{Binding Menus}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Type}" />
<ItemsControl ItemsSource="{Binding Meals}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Price}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
And the below is my summary of class
MenuOfWeekPresenter
└ObservableCollection MenuOfWeek
MenuOfDay
└string DayOfWeek
└ObservableCollection menus
Menu
└string Type
└ObservableCollection meals
Meal
└string Name
└string Price
And I want to use {Binding Type} where,
<StackPanel>
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Price}" />
</StackPanel>
For example,
<StackPanel>
<TextBlock Text="{Binding Type}" />
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Price}" />
</StackPanel>
like that...
please help me..:'(
To accomplish this i think you would need to bind to the parents Datacontext and that is a bit tricky in Windows Phone 7 because it doesn't know FindAncestor you would have to use a Binding helper.
Binding Helper Example
I know that this question is what many of you already posted, but I'm still having a problem. The idea is very simple: I have a DataGrid and when I select the item in DataGrid, it should select item in ComboBox which is in DataForm. I have read many posts, and implemented few ideas in what I did, and now, I have this:
<StackPanel Grid.Column="1" Grid.Row="4" Name="stackPanel1" Margin="0,0,0,-257">
<sdk:DataGrid Name="PhysicalQuantitiesGrid"
MinHeight="100" IsReadOnly="True"
Margin="0,12,0,0"
ItemsSource="{Binding PhysicalQuantities}"
SelectedItem="{Binding Path=CurrentPhysicalQuantity, Mode=TwoWay}"
AutoGenerateColumns="False" VerticalGridLinesBrush="{x:Null}">
<sdk:DataGrid.RowDetailsTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="5">
<StackPanel Orientation="Horizontal" Margin="5">
<StackPanel Orientation="Vertical" Margin="5">
<TextBlock
FontSize="12"
Width="Auto"
Text="Base unit term"/>
<TextBlock
Foreground="CadetBlue"
FontSize="12"
Width="Auto"
TextWrapping="Wrap"
Text="{Binding Path=Unit.Term}"/>
</StackPanel>
<StackPanel Orientation="Vertical" Margin="5">
<TextBlock
FontSize="12"
Width="Auto"
Text="Short term"/>
<TextBlock
Foreground="CadetBlue"
FontSize="12"
Width="Auto"
TextWrapping="Wrap"
Text="{Binding Path=Unit.ShortTerm}"/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</sdk:DataGrid.RowDetailsTemplate>
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Header="Term"
Binding="{Binding Path=Term}"
FontSize="14"
Foreground="DarkBlue"
>
</sdk:DataGridTextColumn>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,12,0,0">
<Button x:Name="NewPhysicalQuantity" Content="AddNew" Height="23" Click="NewPhysicalQuantity_Click"/>
</StackPanel>
<dataform:DataForm x:Name="PhysicalQuantityDetails"
Header="Fizicke velicine - detalji"
AutoGenerateFields="False"
AutoEdit="False"
CommandButtonsVisibility="Commit,Cancel,Edit"
Margin="0,12,0,0"
CurrentItem="{Binding Path=CurrentPhysicalQuantity}"
CancelButtonContent="Cancel"
CommitButtonContent="Commit"
>
<dataform:DataForm.EditTemplate>
<DataTemplate>
<StackPanel>
<dataform:DataField Label="Physical Quantity term:">
<TextBox Text="{Binding Path=Term, Mode=TwoWay}" />
</dataform:DataField>
<dataform:DataField Label="Base unit">
<StackPanel>
<riaControls:DomainDataSource AutoLoad="True" Height="0" Name="baseUnitsDataSource" QueryName="GetBaseUnitsOrdered" Width="0">
<riaControls:DomainDataSource.DomainContext>
<myService:DomainDomainContext/>
</riaControls:DomainDataSource.DomainContext>
</riaControls:DomainDataSource>
<myControl:ComboBox
ItemsSource="{Binding ElementName=baseUnitsDataSource, Path=Data}"
SelectedValuePath="IDUnit"
DisplayMemberPath="Term"
SelectedValue="{Binding Path=IDUnit, Mode=TwoWay}"
>
<ComboBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ComboBox.ItemsPanel>
</myControl:ComboBox>
</StackPanel>
</dataform:DataField>
</StackPanel>
</DataTemplate>
</dataform:DataForm.EditTemplate>
</dataform:DataForm>
<StackPanel
Orientation="Horizontal"
HorizontalAlignment="Right"
Margin="0,12,0,0">
<Button
Content="Save"
x:Name="SaveChangesButton"
Width="100"
Height="23"
Margin="4,0,4,0"
Command="{Binding SaveCommand}" />
</StackPanel>
</StackPanel>
So, I use MVVM with RIA. For data grid I use MVVM, and for ComboBox data context I use RIA. That is the only way to fill the ComboBox and to bind DataGrid value with ComboBox value, but in the wrong way! When I click Edit in data form, I always get ComboBox initialized to the first item. Of course, value in data grid get the same value (wrong!).
What I am doing wrong?
Thanks!
P.S. I forgot to mention that I have two tables, PhysicalQuantity and Unit, where PhysicalQuantity has one or zero Units (BaseUnit).
Lucky
You're using the wrong ComboBox.
Kyle McClellan has a far more capable ComboBox, which honestly should have been rolled out with the toolkit 2 times over by now, but there seems to be something going fishy with toolkit support as well. Please read more about it here:
http://blogs.msdn.com/b/kylemc/archive/2010/06/18/combobox-sample-for-ria-services.aspx