I have a WPF window that has several Listbox and DataGrid controls. The main Listbox displays a list of Contractors. An Address(s) datagrid is bound to the Contractor ListBox and displays address(s) for the current selected Contractor.
I want users of this Window(WPF) to be able to add Addresses to the selected Contractor using the native Datagrid Add functionality. I also want the users to be able to edit associated Address records by clicking in the datagrid cell and having the cell function as an AutoCompleteBox.
I have partially successfully implemented the AutoCompleteBox in the State column of the datagrid control. Currently, the correct Text value for the current Contractor is displayed in the State column of the Address datagrid. If i edit the State cell I get expected autocomplete functionality and I can select a new State.
What is not working is the TwoWay binding. Currently, if I change the current Address state it does not save back to the entity model or the db. Its not surprising since I know I dont have Twoway binding implemented correctly on this control.
I have successfully implemented the Twoway binding with a combobox but the combobox obviously does not provide the autocomplete functionality I need.
Update
We worked on this late yesterday and arrive at a partial solution. Now we have a new issue.
With a ComboBox you can have:
DisplayMemberPath ="StateAbbrv"
SelectedValue="{Binding Path=tbl_Address.StateID, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" and
SelectedValuePath="StateID".
With the AutoCompleteBox it seems you really only have:
ValueMemberPath="StateID" and
Text="{Binding Path=tbl_Address.StateID, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource StateConverter}}" Grid.Column="1" Grid.Row="1" Margin="0,0,0,0" >
With the AutoCompleteBox you can’t have separate display and selected values. Because of my Window control binding and database structure I need to display a string value such as “CA California” while actually having a selected table key integer value in the background.
To be clear, we need to have separate Display and Selected values in the Text part of the AutoCompleteBox control.
Here is the Master ListBox displaying Contractors:
<Grid DataContext="{StaticResource tbl_PartnerViewSource}" HorizontalAlignment="Left" Name="grid3" VerticalAlignment="Top" Height="242" Width="295" Grid.Column="1" Margin="0,1,0,0" Grid.Row="3">
<Grid.RowDefinitions>
<RowDefinition Height="31*" />
<RowDefinition Height="211*" />
</Grid.RowDefinitions>
<Label Content="Contractor List" FontWeight="Bold" Height="25" Margin="0,0,169,0" Name="label10" Padding="3" VerticalAlignment="Top" />
<ListBox DisplayMemberPath="tbl_Organization.OrgName" Height="212" HorizontalAlignment="Right" ItemsSource="{Binding}" Margin="0,30,0,0" Name="orgNameListBox" SelectedValuePath="PtnrID" VerticalAlignment="Center" Width="294" IsSynchronizedWithCurrentItem="True" Grid.RowSpan="2" SelectionChanged="orgNameListBox_SelectionChanged" TabIndex="11" MouseDoubleClick="orgNameListBox_MouseDoubleClick" DataContextChanged="orgNameListBox_DataContextChanged" SourceUpdated="orgNameListBox_SourceUpdated" IsManipulationEnabled="True" />
</Grid>
Here is the Stack Panel containing the Datacontext supporting the controls in discussion:
<StackPanel Grid.Row="3" Height="243" HorizontalAlignment="Left" Name="stackPanel5" VerticalAlignment="Top" Width="295" Grid.Column="1"></StackPanel>
<Label Content="Address(s)" FontWeight="Bold" Height="25" HorizontalAlignment="Left" Margin="306,0,0,0" Name="label1" Padding="3" VerticalAlignment="Top" Width="648" Grid.Column="1" Grid.Row="1" />
<DataGrid Name="dataGridAddress" DataContext="{StaticResource tbl_Partnertbl_PartnerAddressViewSource}" ItemsSource="{Binding}" SelectionMode="Single" SelectionUnit="CellOrRowHeader" AutoGenerateColumns="False" AlternatingRowBackground="#FFFF003B" AlternationCount="2" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" Margin="308,22,0,0" Width="649" Height="113" VerticalAlignment="Top" CanUserDeleteRows="True" CanUserAddRows="True">
<DataGrid.Columns>...
Here is the AutoCompleteBox that is partially working:
<DataGridTemplateColumn x:Name="addState" Header="State" Width="100">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<my1:AutoCompleteBox Name="autoCompleteBox1"
IsTextCompletionEnabled="True"
ItemsSource="{Binding Source={StaticResource tbl_StateViewSource}}"
ValueMemberPath="StateID"
Text="{Binding Path=tbl_Address.StateID, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1" Grid.Row="1" Margin="0,0,0,0" >
<my1:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=StateAbbrv}" Width="30" FontWeight="Bold" Margin="0,0,0,0" />
<TextBlock Text="{Binding Path=StateName}" />
</StackPanel>
</DataTemplate>
</my1:AutoCompleteBox.ItemTemplate>
</my1:AutoCompleteBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
Here is the Combobox with working TwoWay binding:
<GridViewColumn x:Name="addrState" Header="State" Width="75">
<GridViewColumn.CellTemplate>
<DataTemplate>
<ComboBox Name="comboAddressState" SelectedValue="{Binding Path=tbl_Address.StateID, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="{StaticResource Margin2}" DisplayMemberPath="StateAbbrv" SelectedValuePath="StateID" ItemsSource="{Binding Source={StaticResource tbl_StateViewSource}}" IsSynchronizedWithCurrentItem="False" IsEnabled="True" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
Here is the Windows.Resource Section:
<Window.Resources>
<CollectionViewSource x:Key="tbl_PartnerViewSource" d:DesignSource="{d:DesignInstance my:tbl_Partner, CreateList=True}"></CollectionViewSource>
<CollectionViewSource x:Key="tbl_Partnertbl_PartnerAddressViewSource" Source="{Binding Path=tbl_PartnerAddress, Source={StaticResource tbl_PartnerViewSource}}" />
<CollectionViewSource x:Key="tbl_Partnertbl_PartnerContactViewSource" Source="{Binding Path=tbl_PartnerContact, Source={StaticResource tbl_PartnerViewSource}}" />
<CollectionViewSource x:Key="tbl_Partnertbl_PartnerContacttbl_PartnerContactCommChanAddrViewSource" Source="{Binding Path=tbl_PartnerContactCommChanAddr, Source={StaticResource tbl_Partnertbl_PartnerContactViewSource}}" />
<CollectionViewSource x:Key="tbl_Partnertbl_PartnerSystemViewSource" Source="{Binding Path=tbl_PartnerSystem, Source={StaticResource tbl_PartnerViewSource}}" />
<CollectionViewSource x:Key="tbl_Partnertbl_PartnerAliasViewSource" Source="{Binding Path=tbl_PartnerAlias, Source={StaticResource tbl_PartnerViewSource}}" />
<CollectionViewSource x:Key="tbl_Partnertbl_PartnerCommentViewSource" Source="{Binding Path=tbl_PartnerComment, Source={StaticResource tbl_PartnerViewSource}}" />
<CollectionViewSource x:Key="tbl_ServicedCustomerViewSource" d:DesignSource="{d:DesignInstance my:tbl_ServicedCustomer, CreateList=True}" />
<CollectionViewSource x:Key="tbl_SystemViewSource" d:DesignSource="{d:DesignInstance my:tbl_System, CreateList=True}" />
<CollectionViewSource x:Key="tbl_PlatformViewSource" d:DesignSource="{d:DesignInstance my:tbl_Platform, CreateList=True}" />
<CollectionViewSource x:Key="tbl_ManufacturerViewSource" d:DesignSource="{d:DesignInstance my:tbl_Manufacturer, CreateList=True}" />
<CollectionViewSource x:Key="tbl_StateViewSource" d:DesignSource="{d:DesignInstance my:tbl_State, CreateList=True}" />
<CollectionViewSource x:Key="tbl_ZIPViewSource" d:DesignSource="{d:DesignInstance my:tbl_ZIP, CreateList=True}" />
<CollectionViewSource x:Key="tbl_CityViewSource" d:DesignSource="{d:DesignInstance my:tbl_City, CreateList=True}" />
<Thickness x:Key="Margin1">8,-3,-7,-3</Thickness>
<Thickness x:Key="Margin2">-7,-3,-7,-3</Thickness>
</Window.Resources>
Here is a image of the Window(WPF):
Related
I'm new to xaml and Windows 10 Gui programming. I want to design a page with a TextBlock, a ListBox and a Button, all centered in the page. I want the TextBlock and the button always reside at the top and bottom of the page no matter how users resize the window. The ListBox should stretch itself to fill the gap between TextBlock and ListBox automatically. I have tried set VerticalAlignment to different value, but it doesn't seem to do anything.
<Page
x:Class="FirstWin10.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FirstWin10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Orientation="Vertical">
<TextBlock x:Name="textBlock" HorizontalAlignment="Center" Margin="10,20,10,0" TextWrapping="Wrap" VerticalAlignment="Top">
<Run Text="Unkown Screen Name"/>
<LineBreak/>
<Run/>
</TextBlock>
<ListBox x:Name="listBox" HorizontalAlignment="Center" MinWidth="450" MinHeight="178" Margin="50,20,50,0" VerticalAlignment="Stretch">
<StackPanel Orientation="Horizontal">
<CheckBox />
<TextBox Text="ListBox Item #1" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<CheckBox />
<TextBlock>
<Run Text="ListBox Item #2"/>
</TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal">
<CheckBox />
<TextBlock>
<Run Text="ListBox Item #3"/>
</TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal">
<CheckBox />
<TextBlock>
<Run Text="ListBox Item #4"/>
</TextBlock>
</StackPanel>
</ListBox>
<Button x:Name="button" Content="Button" HorizontalAlignment="Center" Margin="10,20,10,0" VerticalAlignment="Bottom"/>
</StackPanel>
Consider using a Grid with three rows. The first and last rows are auto stretched to the size of the TextBlock and Button; the middle row takes the rest of the space.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" HorizontalAlignment="Center" /> <!-- Grid.Row="0" can be removed as it's the default -->
<ListBox Grid.Row="1" HorizontalAlignment="Center" />
<Button Grid.Row="2" HorizontalAlignment="Center" />
</Grid>
I have a list in which there are schedule name, date and time that are visible, but i want that on the long press of a particular item in a listbox there opens a context menu in which only description and schedule name of particular item is visible.
So my code in xaml is: first in the grid there is a listbox in which i have bound the whole list that is scheduleList ansd in the listbox.itemtemplate and inside the data templatei have binded the particular item to the textblock
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox x:Name="scheduleListbox" ItemsSource="{Binding scheduleList}" Hold="scheduleListbox_Hold" Tap="scheduleListbox_Tap" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Height="150" Width="460">
<TextBlock x:Name="textBlock1" Text="{Binding ScheduleName}" Foreground="WhiteSmoke" FontSize="32"/>
<TextBlock x:Name="textBlock2" Text="{Binding ScheduleDate}" Foreground="Red" Margin="0,10,0,0"/>
<StackPanel Orientation="Horizontal" Height="70" Width="460" Hold="StackPanel_Hold">
<TextBlock x:Name="textBlock3" Text="{Binding StartTime}" Margin="0,5,0,0"/>
<TextBlock x:Name="textBlock4" Text="{Binding EndTime}" Margin="50,5,0,0"/>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="menuItem" VerticalOffset="100.0" IsZoomEnabled="True" >
<toolkit:MenuItem Header="Add to calender" ItemsSource="{Binding ScheduleName }"/>
<!--<toolkit:MenuItem Header="Description" ItemsSource="{Binding Description}"/>-->
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Please tell me that how to bind description and schedule name in context menu, either by code or by xaml.
How to bind data in context menu either through code or through xaml?
I create a breadcrumb context menu with binding using the code below. The code you should be interested in is the toolkit:ContextMenu.ItemTemplate section where you specify the bindings. Notice that you can also bind to a command parameter like I do with the index value.
The toolkit:ContextMenu.Template section is not needed. I added this to allow scrolling the items if there are more than will fit on the screen and also to move the menu to the bottom of the screen.
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="breadCrumbContextMenu" ItemsSource="{Binding CloudViewModel.BreadCrumbMenuItems}" Opened="ContextMenu_Opened" Closed="Breadcrumb_ContextMenu_Closed">
<toolkit:ContextMenu.Template>
<ControlTemplate TargetType="toolkit:ContextMenu">
<Border Margin="0,700,0,0" BorderThickness="1" >
<ScrollViewer MaxHeight="700">
<ItemsPresenter/>
</ScrollViewer>
</Border>
</ControlTemplate>
</toolkit:ContextMenu.Template>
<toolkit:ContextMenu.ItemTemplate>
<DataTemplate>
<toolkit:MenuItem Click="breadcrumbMenuItem_Click" CommandParameter="{Binding Index}" Padding="0">
<toolkit:MenuItem.Header>
<StackPanel Orientation="Horizontal" Height="40">
<Image Source="{Binding Image}" Width="40" Height="40" />
<TextBlock Text="{Binding Text}" Margin="24,0,0,0" />
</StackPanel>
</toolkit:MenuItem.Header>
</toolkit:MenuItem>
</DataTemplate>
</toolkit:ContextMenu.ItemTemplate>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
I have created a page where there's alot of input from the user. So the User should be able to scroll down to be able to press a Upload button. To scroll down on the page I have used a ScrollViewer outside a grid. I am able to scroll but the page keeps scrolling back after scrolling down.
Here is my code:
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanelButtom" Grid.Row="1" >
<ScrollViewer >
<Grid x:Name="ContentPanel" Background="black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="154" />
<ColumnDefinition Width="326" />
</Grid.ColumnDefinitions>
<Image Height="109" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="167" Margin="23,19,0,0" Source="{Binding Path=ImageSoruce, Mode=TwoWay}" Grid.ColumnSpan="2" />
<TextBox Height="71" HorizontalAlignment="Left" Margin="12,161,0,0" Name="nameInput" Text="{Binding Path=Name, Mode=TwoWay}" VerticalAlignment="Top" Width="430" Grid.ColumnSpan="2" />
<TextBlock Height="56" HorizontalAlignment="Left" Margin="23,134,0,0" Name="nameLabel" Text="Name" VerticalAlignment="Top" Width="130" FontSize="25" />
<TextBlock FontSize="25" Height="60" HorizontalAlignment="Left" Margin="23,238,0,0" Name="descriptionLabel" Text="Description" VerticalAlignment="Top" Width="130" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="12,265,0,0" Name="descriptionInput" Text="{Binding Path=Description, Mode=TwoWay}" VerticalAlignment="Top" Width="430" IsEnabled="True" Grid.ColumnSpan="2" />
<TextBlock FontSize="25" Height="60" HorizontalAlignment="Left" Margin="23,343,0,0" Name="locationLabel" Text="Location" VerticalAlignment="Top" Width="130" />
<TextBlock Height="46" HorizontalAlignment="Left" Margin="24,384,0,0" Name="locationInput" Text="{Binding Path=Location, Mode=TwoWay}" VerticalAlignment="Top" Width="401" Loaded="locationInput_Loaded" Grid.ColumnSpan="2" />
<toolkit:ListPicker SelectionMode="Multiple" FullModeHeader="CATEFORIES" x:Name="ListPickerCategories" CacheMode="BitmapCache" HorizontalAlignment="Left" Margin="25,492,0,0" VerticalAlignment="Top" Width="401" Grid.ColumnSpan="2" ItemsSource="{Binding Categories}" Height="78"></toolkit:ListPicker>
<TextBlock FontSize="25" Height="60" HorizontalAlignment="Left" Margin="24,436,0,0" Name="textBlock1" Text="Categories" VerticalAlignment="Top" Width="130" />
<Button Content="Upload" Height="86" HorizontalAlignment="Left" Margin="26,604,0,0" Name="UploadButton" VerticalAlignment="Top" Width="411" Click="UploadButton_Click" Grid.ColumnSpan="2" />
</Grid>
</ScrollViewer>
</Grid>
What can be the cause of this problem and how do I solve it?
Use StackPanels to put elements one below the other. Remove all your margins, height, width and other absolute positioning stuff
<Grid x:Name="ContentPanelButtom" Grid.Row="1" >
<ScrollViewer>
<StackPanel>
<!-- elements here -->
</StackPanel>
</ScrollViewer>
</Grid>
I had the same issue. but at last i solved it, i just used the Height property to do this. Please do the following steps
First create a ScrollViewer
Indide the ScrollViewer create a container(eg: Grid/StackPanel/Border etc...) and put every controlls inside it.
Set fixed Height for ScrollViewer and the Container (Note: Height of container should be greater than ScrollViewer's Height)
See the below Code
<ScrollViewer Height="500">
<Grid Name="Container" Height="700">
<TextBox/>
<TextBox/>
<TextBox/>
</Grid>
</ScrollViewer>
Now you can scroll the container Grid Even the KeyBoard shown or even focus on a TextBox.
Another day another problem, this time I think with a simple issue into XAML formatting.
I have a ListPicker in a StackPanel on a XAML page in a WP7 app. Whenever I tap the ListPicker, it expands, but it appears to expand behind the item below it. If I have enough items in the list it opens in full screen mode which works fine.
Any suggestions, pointers would be appreciated;
<Grid Name="grdBought">
<StackPanel Visibility="Visible" Margin="0,0,0,0" Height="480">
<Button Name="btnSave" Grid.Row="0" Content="Save" Height="100" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="378" Click="btnSave_Click" />
<StackPanel Grid.Row="1" Orientation="Vertical">
<toolkit:ListPicker Name="CategoryPicker" Header="Select Category" HorizontalAlignment="Left" ItemsSource="{Binding Categories}" CacheMode="BitmapCache" TabIndex="0" Margin="0,0,0,0" SelectionChanged="CategoryPicker_SelectionChanged" Height="100" Width="195">
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" HorizontalAlignment="Left">
<TextBlock Text="{Binding CategoryDesc}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="{StaticResource PhoneFontSizeMediumLarge}" />
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<StackPanel Name="item" Orientation="Vertical" Margin="0, 0, 0, 0">
<TextBlock Margin="0, 0, 0, 0" Text="{Binding CategoryDesc}" FontSize="40" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
<StackPanel Name="Items" Grid.Row="1" Orientation="Horizontal">
<TextBox Name="txtDescription" Height="100" Margin="0,0,0,0" Text="" Width="225" MaxLength="100" FontSize="40" InputScope="Text" />
<TextBox Name="txtAmount" HorizontalAlignment="Left" Text="0.00" Height="100" Margin="0,0,0,0" TextAlignment="Right" FontSize="40" FontFamily="Segoe WP Semibold" Width="163" KeyUp="txtAmount_KeyUp" />
</StackPanel>
</StackPanel>
<TextBlock Name="tb1" Text="Amount" Height="27" Margin="0,0,0,0" Width="137" />
<Button Name="button1" Content="Button" Height="72" HorizontalAlignment="Left" Margin="249,0,0,0" VerticalAlignment="Top" Width="160" Click="button1_Click" />
</StackPanel>
I have been through the examples on the windowsphonegeek.com site, but I still can't make it work!
The issue is that you're setting the Height of the ListPicker to 100. Remove that, and just leave as auto. This is an issue b/c when you restrict the height, the listpicker has nowhere to expand (thus, showing the behavior you're seeing)
I guess height is creating an issue, just make sure that height of listpicker is greater than stackpanel.
I noticed a very strange behavior:
in my windows phone 7 I have a ListBox that can contain anything from 1-2 to 2-300 items.
I noticed that when the number of items is big (not sure about the number but for sure >150 items) the OnSelectionChanged event is not raised.
This is the XAML of my listbox
<ListBox ItemsSource="{Binding Path=Posts}" ItemTemplate="{StaticResource IconsWithText}"
ScrollViewer.VerticalScrollBarVisibility ="Disabled"
SelectionChanged="ListBox_SelectionChanged" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
And the template for the ItemTemplate is:
<DataTemplate x:Name="IconsWithText">
<Grid x:Name="ThumLink" Width="160" Height="140" Margin="10" Background="#FF666666">
<Image Source="Resources/Images/All.png" Visibility="{Binding Path=VisibilityAll}" />
<Image delay:LowProfileImageLoader.UriSource="{Binding Picture}"
Visibility="{Binding Path=VisibilityPic}"
Stretch="UniformToFill" VerticalAlignment="Top" HorizontalAlignment="Left" />
<Border x:Name="border" VerticalAlignment="Bottom" Background="#d9ffffff" Height="62" BorderBrush="Black" Visibility="{Binding Path=VisibilityPic}" >
<TextBlock x:Name="textBlock" Text="{Binding Title}" VerticalAlignment="Top" TextWrapping="Wrap" MaxHeight="60" Style="{StaticResource PhoneTextSmallStyle}"
Foreground="Black" FontSize="20" Margin="4,1,4,0" Height="62"/>
</Border>
</Grid>
</DataTemplate>
Is this a bug or did I do something wrong? I was in debug and the event handler never gets called, but it works when the items are not many.
Simone
The problem with using the plain StackPanel is that all visual object will be created and added to the StackPanel which will be very expensive in terms of memory and may trip over other limits in the rendering system.
Try changing to:-
<VirtualisingStackPanel Orientation="Horizontal" />
So far though I've not been able to reproduce your problem with 300 items even using a plain StackPanel.