I have a ComboBox that has an ItemTemplate with a CheckBox in it (read Dropdown CheckBoxList). I basically want to have a separate binding for the text in the combobox (both when an item is selected, and if an item isn't selected). I've tried a few different methods but either can't seem to get them to work with my setup, or can't find they have some issues. I've even tried a few mixes and matches of them. Usually I find they either don't work when an item isn't specifically selected (which could be possible if the user checks a few boxes then clicks out of the ComboBox), or aren't updating the text properly.
My xaml is this (the items of focus are the DataTemplates with the ComboBoxes in them):
<UserControl x:Class="BestClient.ucReportViewer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:BestClient"
mc:Ignorable="d"
d:DesignHeight="315" d:DesignWidth="388" Background="#FFD7DFEC">
<UserControl.Resources>
<DataTemplate x:Key="datetime">
<StackPanel Orientation="Horizontal" Height="35">
<TextBlock Text="{Binding rfName}" Width="100" VerticalAlignment="Center" />
<DatePicker Tag="{Binding rfParameter}" SelectedDate="{Binding rfValues, Mode=TwoWay}" Width="200" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="office">
<StackPanel Orientation="Horizontal" Height="35">
<TextBlock Text="{Binding rfName}" Width="100" VerticalAlignment="Center" />
<ComboBox x:Name="officeComboBox" Tag="{Binding rfParameter}" Width="200" ItemsSource="{Binding Path=DataContext.OfficeList, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Mode=TwoWay}" VerticalAlignment="Center">
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox Tag="{Binding id}" IsChecked="{Binding isSelected}" Width="200" Content="{Binding value}" Margin="2" x:Name="CheckBox" Checked="OfficeCheckBox_Checked"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="carrier">
<StackPanel Orientation="Horizontal" Height="35">
<TextBlock Text="{Binding rfName}" Width="100" VerticalAlignment="Center" />
<ComboBox Tag="{Binding rfParameter}" Width="200" ItemsSource="{Binding Path=DataContext.CarrierList, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Mode=TwoWay}" VerticalAlignment="Center">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Tag="{Binding id}" IsChecked="{Binding isSelected}" Width="200" Content="{Binding value}" Margin="2"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="defaultTemplate">
<StackPanel Orientation="Horizontal" Height="35">
<TextBlock Text="{Binding rfName}" Width="100" VerticalAlignment="Center" />
<TextBox Tag="{Binding rfParameter}" Width="200" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
<local:ReportFilterTemplateSelector x:Key="ReportFilterTemplateSelector" />
</UserControl.Resources>
<Grid x:Name="ReportViewer">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="45"/>
<RowDefinition Height="*"/>
<RowDefinition Height="45"/>
</Grid.RowDefinitions>
<Viewbox Grid.Row="0" Grid.Column="0">
<TextBlock Margin="10" TextWrapping="Wrap" Text="Select a Report:"/>
</Viewbox>
<ComboBox Grid.Column="1" Margin="10" Grid.ColumnSpan="2" ItemsSource="{Binding ReportList}" DisplayMemberPath="Value" SelectedValuePath="Key" SelectedItem="{Binding SelectedReport}" VerticalContentAlignment="Center" />
<ListView x:Name="FilterList" Margin="10,0" Grid.Row="1" Grid.ColumnSpan="3" ItemTemplateSelector="{StaticResource ReportFilterTemplateSelector}" ItemsSource="{Binding reportFilters, Mode=TwoWay}" />
<Button Command="{Binding OpenReport}" Content="Open Report" Grid.Column="2" Margin="10" Grid.Row="2" VerticalAlignment="Stretch"/>
</Grid>
</UserControl>
Ideally, I'd like to bind the display text of the combobox with the OfficeListValues method in my ViewModel.
{Binding Path=DataContext.OfficeListValues, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}
Any help would be appreciated!
Related
I have a following problem in my UWP project:
The data binding in DataGridTemplateColumn to another DataContext than for the row, doesn't work.
Here is my XAML structure:
<Page
x:Name="Page1"
x:Class="Project1.Class1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Project1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:controls="using:Microsoft.UI.Xaml.Controls"
xmlns:tools="using:Microsoft.Toolkit.Uwp.UI.Controls" xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<HyperlinkButton Content="<- Powrót" HorizontalAlignment="Left" FontSize="36" Foreground="#FF615E5A" VerticalAlignment="Top" Click="BackToMainPage" />
<TextBlock x:Name="pageTitle" Text="Title" HorizontalAlignment="Center" FontSize="36" />
<Grid Grid.Row="1" x:Name="body">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="Path:" />
<TextBox x:Name="path" Grid.Column="1" Text="{x:Bind Folder.Path}" />
<Button Grid.Column="2" Content="Choose folder" Click="SelectFolder" />
<TextBlock Grid.Row="1" Text="Name:" />
<TextBox x:Name="file" Grid.Row="1" Grid.Column="1" Text="{x:Bind FileName}" />
<TextBlock Grid.Row="1" Grid.Column="2" Text="X:"></TextBlock>
<ComboBox Grid.Row="1" Grid.Column="3" x:Name="scope">
<ComboBoxItem IsSelected="True" Content="M" Tag="M"/>
<ComboBoxItem Content="L" Tag="L"/>
<ComboBoxItem Content="K" Tag="K" />
</ComboBox>
<TextBlock Grid.Row="2" Text="Code:"></TextBlock>
<TextBox x:Name="code" Grid.Row="2" Grid.Column="1" Text="" />
<TextBlock Grid.Row="2" Grid.Column="2" Text="Name:"></TextBlock>
<TextBox x:Name="name" Grid.Row="2" Grid.Column="3" Text="" TextWrapping="Wrap"/>
<ListView Grid.Row="3"
Grid.ColumnSpan="4"
x:Name="list"
SelectedItem="{x:Bind SelectedSubmatrix, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
ItemsSource="{x:Bind SubmatrixList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Vertical"
HorizontalAlignment="Stretch"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollMode="Auto" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="{Binding ElementName=body, Path=ActualWidth}">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel>
<TextBlock Text="Name:"></TextBlock>
<TextBox Text="{Binding Name, Mode=TwoWay}" TextWrapping="Wrap"/>
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="Type:"></TextBlock>
<ComboBox x:Name="type" SelectedValue="{Binding Type, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" SelectedValuePath="Tag">
<ComboBoxItem IsSelected="True" Content="L" Tag="L"/>
<ComboBoxItem Content="M" Tag="M"/>
</ComboBox>
</StackPanel>
<StackPanel x:Name="key" Grid.Column="2" Visibility="Collapsed">
<Interactivity:Interaction.Behaviors>
<Core:DataTriggerBehavior Binding="{Binding ElementName=type, Path=SelectedItem.Content}" Value="M">
<Core:ChangePropertyAction TargetObject="{Binding ElementName=key}" PropertyName="Visibility" Value="Visible" />
</Core:DataTriggerBehavior>
<Core:DataTriggerBehavior Binding="{Binding ElementName=type, Path=SelectedItem.Content}" Value="L">
<Core:ChangePropertyAction TargetObject="{Binding ElementName=key}" PropertyName="Visibility" Value="Collapsed" />
</Core:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<TextBlock Text="Key M:" />
<ComboBox SelectedItem="{Binding Key, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" SelectedValuePath="Tag">
<ComboBoxItem IsSelected="True" Content="1" Tag="1"/>
<ComboBoxItem Content="2" Tag="2"/>
<ComboBoxItem Content="3" Tag="3"/>
</ComboBox>
</StackPanel>
<Button Grid.Row="1" Content="Add" Command="{Binding Path=AddColumnCommand}" />
<tools:DataGrid Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="4"
AutoGenerateColumns="False"
ItemsSource="{Binding Columns, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" RowHeight="200">
<tools:DataGrid.Columns>
<tools:DataGridTemplateColumn Header="Type">
<tools:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<!--<TextBlock Text="{Binding Name}" />-->
<TextBlock Text="{Binding ElementName=Page1, Path=DataContext.FileName}" />
</DataTemplate>
</tools:DataGridTemplateColumn.CellTemplate>
</tools:DataGridTemplateColumn>
<tools:DataGridTextColumn Header="Nazwa" Binding="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<!--<tools:DataGridTextColumn Header="Nazwa2" Binding="{Binding ElementName=Strona, Path=DataContext.FileName}" />-->
</tools:DataGrid.Columns>
</tools:DataGrid>
<!--<ComboBox ItemsSource="{Binding ElementName=Strona, Path=DataContext.Dictionary2}" />-->
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Grid.Row="4" HorizontalAlignment="Right" Content="Add main" Click="AddSubmatrix"/>
<Button Grid.Row="4" Grid.Column="1" HorizontalAlignment="Right" Content="Delete main" Click="DeleteSelectedSubmatrix"/>
<Button Grid.Row="4" Grid.Column="2" Grid.ColumnSpan="2" HorizontalAlignment="Right" Content="Generate" Click="GenerateTemplate"/>
</Grid>
</Grid>
</Page>
Those three commented out lines were just for my testing and in all of them binding works properly, but for this uncommented one in DataGridTemplateColumn.CellTemplate -> DataTemplate doesn't. Does anybody knows why? And how to deal with it?
It's known issue for DataGrid, you can only access current item model's property within CellTemplate. It will not work, if access root datacontext by elementname markup. For this scenario we suggest your add FileName into each item like this case replay.
And the other way is intercepting DataGridTemplateColumn generate element method, and use new value to replace the old one.
For example, replace the Name property as the string "FileName"
public class CustomDataGridTemplateColumn : DataGridTemplateColumn
{
public CustomDataGridTemplateColumn()
{
}
protected override FrameworkElement GenerateElement(DataGridCell cell, object dataItem)
{
(dataItem as Item).Name = "FileName";
return base.GenerateElement(cell, dataItem);
}
public class Person
{
public string Name { get; set; }
public bool IsMan { get; set; }
}
}
Xaml Code
<controls:DataGrid.Columns>
<controls:DataGridTextColumn
Binding="{Binding Name}"
Header="Rank"
Tag="Rank"
/>
<controls:DataGridComboBoxColumn
Binding="{Binding Complete}"
Header="Mountain"
Tag="Mountain"
/>
<local:CustomDataGridTemplateColumn Header="Check" Tag="Test1">
<local:CustomDataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}"/>
<ToggleSwitch IsOn="{Binding Complete}" Visibility="Collapsed"/>
</StackPanel>
</DataTemplate>
</local:CustomDataGridTemplateColumn.CellTemplate>
</local:CustomDataGridTemplateColumn>
</controls:DataGrid.Columns>
I'm filling a two WrapPanel with Buttons via DataTemplate but they all align vertically for some reason, what exactly is wrong here?
It doesn't matter if I set the Orientation property or not.
XAML:
<UserControl x:Class="DashboardClient.View.DashboardView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
Width="940" Height="640">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DockPanel Grid.Column="0" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}},Path=ActualHeight}">
<ScrollViewer VerticalScrollBarVisibility="Auto" DockPanel.Dock="Top" Height="520" Margin="5">
<WrapPanel>
<ItemsControl ItemsSource="{Binding Dashboards}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Width="120" Height="120" Margin="5" Command="{Binding DataContext.DashboardCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}" CommandParameter="{Binding}">
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding Name}" />
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Button Width="120" Height="120" Margin="5" Command="{Binding DashboardAddCommand}" Content="+" FontSize="100" />
</WrapPanel>
</ScrollViewer>
<StackPanel Height="100" Margin="5">
<Label>Dashboardname:</Label>
<TextBox Text="{Binding SelectedDashboard.Name}" />
<RadioButton Content="Sichtbar" Margin="0 10" IsChecked="{Binding SelectedDashboard.IsVisibleOnDashboard, UpdateSourceTrigger=PropertyChanged}" />
<Button Content="Dashboard löschen" Command="{Binding DashboardRemoveCommand}" />
</StackPanel>
</DockPanel>
<StackPanel Grid.Column="1" Margin="0">
<ScrollViewer VerticalScrollBarVisibility="Auto" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StackPanel}},Path=ActualHeight}">
<WrapPanel>
<ItemsControl ItemsSource="{Binding SelectedDashboard.DashboardItems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Width="200" Height="120" Command="{Binding DataContext.DashboardItemCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}" CommandParameter="{Binding}" Margin="10">
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding Name}" />
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Button Width="200" Height="120" Content="+" FontSize="100" Command="{Binding DashboardItemAddCommand}" Margin="10" />
</WrapPanel>
</ScrollViewer>
</StackPanel>
</Grid>
</UserControl>
This is what the WrapPanel looks like:
The Add Button is always cut off somehow, too.
If you want to put the children of the ItemsControl horizontally in a WrapPanel, you need to tell the ItemsControl to use a WrapPanel for its children via an ItemsPanelTemplate:
<WrapPanel Orientation="Horizontal">
<ItemsControl ItemsSource="{Binding Dashboards}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button
Width="120"
Height="120"
Margin="5"
Command="{Binding DataContext.DashboardCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
CommandParameter="{Binding}"
>
<TextBlock
TextWrapping="Wrap"
HorizontalAlignment="Center"
Text="{Binding Name}"
/>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<Button
Width="120"
Height="120"
Margin="5"
VerticalAlignment="Top"
Command="{Binding DashboardAddCommand}"
Content="+"
FontSize="100"
/>
</WrapPanel>
I don't know what you want to do with the button. My guess is that you want it to the right of the ItemsControl, and I aligned it to the top because that makes more sense to me.
Instead of
<ScrollViewer>
<WrapPanel>
<ItemsControl ItemsSource="{Binding Dashboards}">
<ItemsControl.ItemTemplate ... />
</ItemsControl>
<Button Content="+" ... />
</WrapPanel>
</ScrollViewer>
You can use
<ScrollViewer>
<ItemsControl ItemsSource="{Binding Dashboards}">
<ItemsControl.ItemTemplate ... />
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<Button Content="+" ... /> <!-- A -->
</ScrollViewer>
<Button Content="+" ... /> <!-- B -->
WrapPanel is moved inside ItemsControl to layout dashboards.
You can put button somewhere else (same as #EdPlunkett I don't have a good idea where to put it): A - will let you to scroll button together with dashboards and B will keep button fixed, disregards scrolling.
I have the following control, the first row is a header row. There will always be at least one additional row. (minimum of 2 total rows).
I've thought about making the content row into a UserControl but unsure about how to set the content of the UserControl into the two columns. (Stack in Column 0 and TriggerForWord in Column 1)
What is the best way to implement adding rows dynamically and setting the content? UserControl loaded into each row? Something else?
<Grid Grid.Row="3" Margin="10,10,10,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Source={x:Static localization:Resources.WordToTriggerAction}}" Margin="2 8 2 8" FontWeight="SemiBold" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Source={x:Static localization:Resources.Trigger}}" Margin="12 8 2 8" FontWeight="SemiBold" />
<!-- dynamic part -->
<StackPanel x:Name="Stack" Orientation="Horizontal" Grid.Row="1" Grid.Column="0" Margin="0,0,10,20" VerticalAlignment="Top">
<telerik:RadAutoCompleteBox x:Name="WordForAction" Width="300" WatermarkContent="{Binding Source={x:Static localization:Resources.EnterWordForAction}}" Margin="0" ItemsSource="{Binding Path=Words}"
DisplayMemberPath="word" SelectionMode="Single" AutoCompleteMode="Append" SearchTextChanged="WordForAction_SearchTextChanged" />
<Button IsEnabled="{Binding Path=SearchText.Length, ElementName=WordForAction}" IsTabStop="False" Height="{Binding Path=ActualHeight, ElementName=WordForAction}" FontFamily="{StaticResource TelerikWebUI}" FontSize="15" Content="{StaticResource GlyphPlus}" ToolTip="{Binding Source={x:Static localization:Resources.AddWord}}" VerticalAlignment="Bottom" />
<Button IsEnabled="{Binding Path=SearchText.Length, ElementName=WordForAction}" IsTabStop="False" Height="{Binding Path=ActualHeight, ElementName=WordForAction}" FontFamily="{StaticResource TelerikWebUI}" FontSize="15" Content="{StaticResource GlyphMinus}" ToolTip="{Binding Source={x:Static localization:Resources.RemoveWord}}" VerticalAlignment="Bottom" />
</StackPanel>
<telerik:RadComboBox x:Name="TriggerForWord" Grid.Row="1" Grid.Column="1" Width="150" EmptyText="{Binding Source={x:Static localization:Resources.Trigger}}" IsEditable="False" IsEnabled="False" SelectedValuePath="uuid" SelectionChanged="TriggerForWord_SelectionChanged"
Height="{Binding ElementName=WordForAction, Path=ActualHeight}" Margin="10 0 0 0" ItemsSource="{Binding Path=Triggers}" DisplayMemberPath="description" VerticalAlignment="Top" />
</Grid>
For other folks who come this way ...
<Grid Grid.Row="3" Margin="0,10,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="310"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Source={x:Static localization:Resources.WordToTriggerAction}}" Margin="2 8 2 8" FontWeight="SemiBold" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Source={x:Static localization:Resources.Trigger}}" Margin="2 8 2 8" FontWeight="SemiBold" />
<ItemsControl Grid.Row="1" Grid.ColumnSpan="2" ItemsSource="{Binding Path=WordsForAction}" x:Name="WordsForActionItems" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0, 0, 0, 5">
<StackPanel Orientation="Horizontal" Margin="0" VerticalAlignment="Top" Width="310">
<telerik:RadAutoCompleteBox x:Name="WordForAction" Width="250" WatermarkContent="{Binding Source={x:Static localization:Resources.EnterWordForAction}}" Margin="0"
ItemsSource="{Binding Path=Words, ElementName=_this}" DisplayMemberPath="Word" SearchText="{Binding Word}"
SelectionMode="Single" AutoCompleteMode="Append" SearchTextChanged="WordForAction_SearchTextChanged" />
<Button Name="AddWord" IsEnabled="True" IsTabStop="False" Height="{Binding Path=ActualHeight, ElementName=WordForAction}" FontFamily="{StaticResource TelerikWebUI}" FontSize="15" Content="{StaticResource GlyphPlus}" Click="AddWord_Click" ToolTip="{Binding Source={x:Static localization:Resources.AddWord}}" VerticalAlignment="Bottom" />
<Button Name="RemoveWord" IsEnabled="{Binding Items.Count, ElementName=WordsForActionItems, Converter={StaticResource CountToBoolConverter}}" IsTabStop="False" Height="{Binding Path=ActualHeight, ElementName=WordForAction}" FontFamily="{StaticResource TelerikWebUI}" FontSize="15" Content="{StaticResource GlyphMinus}" Click="RemoveWord_Click" ToolTip="{Binding Source={x:Static localization:Resources.RemoveWord}}" VerticalAlignment="Bottom" />
</StackPanel>
<telerik:RadComboBox Grid.Column="1" x:Name="TriggerForWord" Width="150" EmptyText="Trigger" IsEditable="False" IsEnabled="True" SelectionChanged="TriggerForWord_SelectionChanged"
Margin="0" ItemsSource="{Binding Path=Triggers, ElementName=_this}" SelectedValuePath="uuid" DisplayMemberPath="description" SelectedValue="{Binding Trigger_uuid}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
I am making an application in which I want to resize screen area when keyboard is open. Just like in this calendar application of windows phone.
After opening keyboard look screen should resize and also I should be able to scroll till the end of the page without closing keyboard:
In my application i am not able to do these things. In my page last elements of the page stays behind keyboard if i want to access that elements of the page i have to close keyboard but in calendar application of Nokia does great job by re sizing the page somehow so i can access whole part of page even though keyboard is open.
Can somebody help me out in this problem?
Here is code for my page
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Style="{StaticResource HeaderStackPanelStyle}">
<TextBlock TextAlignment="Center" Style="{StaticResource PhoneTextBlockHeaderStyle}" Text="Add Claim Item" />
</StackPanel>
<ScrollViewer Name="MainPageScroller" Grid.Row="1">
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Margin="12,0,12,12">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Name="MainContentPenal" Grid.Row="0">
<StackPanel >
<TextBlock TextAlignment="Left" Text="Category" Style="{StaticResource PhoneTextFirstItemStyle}" >
</TextBlock>
<ToolKit:ListPicker x:Name="CategoryListPicker"
ItemsSource="{Binding Categories}" SelectedItem="{Binding SelectedCategory, Mode=TwoWay}" SelectedIndex="{Binding Categories,Converter={StaticResource DefaultSetter}}"
ExpansionMode="FullScreenOnly" SelectionMode="Single" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" SelectionChanged="CategorySelection" ItemTemplate="{StaticResource CategoryTamplate}" FullModeItemTemplate="{ StaticResource CategoryTamplate}" >
</ToolKit:ListPicker>
</StackPanel >
<StackPanel Visibility="{Binding SelectedCategory, Converter={StaticResource TravelMileageHelper}, ConverterParameter=amount}" >
<TextBlock TextAlignment="Left" Text="Amount" Style="{StaticResource PhoneTextFirstItemStyle}" />
<TextBox x:Name="AmountTextBox" Style="{StaticResource WebExpensesTextBoxStyle}" Text="{Binding Amount, Mode=TwoWay}" KeyUp="numericTextBox_keyUp" KeyDown="numericTextBox_keyDown" InputScope="Number" TextChanged="TextChange_Event" />
</StackPanel>
<StackPanel Visibility="{Binding SelectedCategory, Converter={StaticResource TravelMileageHelper},ConverterParameter=mileage}" >
<TextBlock TextAlignment="Left" Text="Mileage units" Style="{StaticResource PhoneTextFirstItemStyle}" />
<TextBox x:Name="mileageTextBox" Text="{Binding MileageUnit, Mode=TwoWay}" Style="{StaticResource WebExpensesTextBoxStyle}" KeyUp="numericTextBox_keyUp" KeyDown="numericTextBox_keyDown" TextWrapping="Wrap" InputScope="Number" TextChanged="TextChange_Event"/>
</StackPanel>
<StackPanel Visibility="{Binding SelectedCategory, Converter={StaticResource TravelMileageHelper}, ConverterParameter=trip}" >
<TextBlock TextAlignment="Left" Text="Mileage" Style="{StaticResource PhoneTextFirstItemStyle}" />
<Button Content="Add mileage" Click="AddMileage"/>
</StackPanel>
<StackPanel Visibility="{Binding SelectedCategory,Converter={StaticResource TravelMileageHelper}, ConverterParameter=trip}" >
<StackPanel Visibility="{Binding TripMasterModel, Mode=TwoWay, Converter={StaticResource VisibiltyHelper}}">
<Grid DataContext="{Binding TripMasterModel}">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0">
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Left" Margin="5 0 0 0" VerticalAlignment="Center" Text="{Binding Start}"></TextBlock>
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="1">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="" FontFamily="Segoe UI Symbol" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="2">
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center" Text="{Binding End}"></TextBlock>
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="3">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Distance}"/>
</StackPanel>
<StackPanel Visibility="{Binding subTrips,Converter={StaticResource VisibiltyHelper}}" Grid.Row="1" Orientation="Horizontal" Grid.ColumnSpan="4" >
<TextBlock HorizontalAlignment="Left" Text="via"/>
<ItemsControl ItemsSource="{Binding subTrips}" ItemTemplate="{StaticResource SubTripTemplate}" HorizontalAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
</Grid>
</StackPanel>
</StackPanel>
<StackPanel >
<TextBlock TextAlignment="Left" Text="Description" Style="{StaticResource PhoneTextFirstItemStyle}" />
<TextBox x:Name="DescriptionTextBox" Style="{StaticResource WebExpensesTextBoxStyle}" Text="{Binding Description, Mode=TwoWay}" Height="120" TextWrapping="Wrap" TextChanged="TextChange_Event" KeyDown="DescriptionTextBox_KeyDown"/>
</StackPanel>
<StackPanel >
<ToolKit:DatePicker HeaderTemplate="{StaticResource DatePickerHeader}" Value="{Binding SelectedDate,Mode=TwoWay}" ValueStringFormat="{Binding DateFormat}" HorizontalAlignment="Left" x:Name="DatePicker" VerticalAlignment="Top" Width="200" />
</StackPanel>
<StackPanel Visibility="{Binding Currencies, Converter={StaticResource VisibiltyHelper}}" >
<TextBlock TextAlignment="Left" Text="Currency" Style="{StaticResource PhoneTextFirstItemStyle}" />
<ToolKit:ListPicker x:Name="CurrencyListPicker"
ItemsSource="{Binding Currencies}" SelectedItem="{Binding SelectedCurrency, Mode=TwoWay}"
DisplayMemberPath="Name" SelectedIndex="{Binding Currencies,Converter={StaticResource DefaultSetter}}" FullModeItemTemplate="{ StaticResource CurrencyTamplate}" >
</ToolKit:ListPicker>
</StackPanel>
<StackPanel Visibility="{Binding Clients, Converter={StaticResource VisibiltyHelper}}" >
<TextBlock TextAlignment="Left" Text="Client" Style="{StaticResource PhoneTextFirstItemStyle}"/>
<ToolKit:ListPicker x:Name="ClientListPicker"
ItemsSource="{Binding Clients}" SelectedItem="{Binding SelectedClient, Mode=TwoWay}"
ItemTemplate="{StaticResource ShowMember}" SelectedIndex="{Binding Clients,Converter={StaticResource DefaultSetter}}" FullModeItemTemplate="{ StaticResource ClientTemplate}" >
</ToolKit:ListPicker>
</StackPanel>
<StackPanel Visibility="{Binding SubClients, Converter={StaticResource VisibiltyHelper}}" >
<TextBlock TextAlignment="Left" Text="Subclient" Style="{StaticResource PhoneTextFirstItemStyle}"/>
<ToolKit:ListPicker x:Name="SubClientListPicker"
ItemsSource="{Binding SubClients,Mode=TwoWay}"
DisplayMemberPath="Name" SelectedItem="{Binding SelectedSubclient, Mode=TwoWay}" SelectedIndex="{Binding SubClients,Converter={StaticResource DefaultSetter},Mode=TwoWay}" FullModeItemTemplate="{ StaticResource ClientTemplate}" >
</ToolKit:ListPicker>
</StackPanel>
<StackPanel Visibility="{Binding Vendors, Converter={StaticResource VisibiltyHelper}}" >
<TextBlock TextAlignment="Left" Text="Vendor" Style="{StaticResource PhoneTextFirstItemStyle}"/>
<ToolKit:ListPicker x:Name="VendorListPicker"
ItemsSource="{Binding Vendors}" SelectedItem="{Binding SelectedVendor, Mode=TwoWay}"
DisplayMemberPath="Name" SelectedIndex="{Binding Vendors,Converter={StaticResource DefaultSetter}}" SelectionChanged="vendorSelection" FullModeItemTemplate="{ StaticResource ClientTemplate}" >
</ToolKit:ListPicker>
</StackPanel>
<StackPanel >
<TextBlock TextAlignment="Left" Text="Receipt" Style="{StaticResource PhoneTextFirstItemStyle}"/>
<Button Click="AddReceipt_Btn_Click" Content="Add receipt"/>
</StackPanel>
<StackPanel x:Name="ImagePenal">
<ItemsControl Width="Auto" HorizontalAlignment="Stretch" ItemsSource="{Binding ReceiptList}" ItemTemplate="{StaticResource ImageListTemplate}" >
</ItemsControl>
</StackPanel>
</StackPanel>
</Grid>
</ScrollViewer>
Give your content in between ListBox or ScrollViewer.
<ListBox>
//your textbox and everything
</ListBox>
or
<ScrollViewer>
//your textbox and everything
</ScrollViewer>
I'm trying to create a listbox template (for the items). This is what I've got.
<Window.Resources>
<DataTemplate x:Key="ItemTemplate">
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="TEKS" FontSize="20" FontWeight="Bold" Background="#FF502F8F" Foreground="White" Width="{Binding Path=Width, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}}" TextAlignment="Center" />
<TextBlock Text="{Binding Level}" FontSize="24" Background="#FF058C44" HorizontalAlignment="Center" Width="{Binding Path=Width, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}}" Foreground="White" TextAlignment="Center" FontFamily="Segoe UI Light" />
</StackPanel>
<TextBlock Grid.Column="1" Text="{Binding Owner}" FontSize="20" FontWeight="Bold" TextWrapping="Wrap" />
</Grid>
</DataTemplate>
</Window.Resources>
<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">
<ListBox ItemTemplate="{DynamicResource ItemTemplate}" ItemsSource="{Binding Collection}" Margin="44,39,82,103" Style="{DynamicResource ListBoxStyle}"/>
</Grid>
And this is image how it looks.
Can you see the textblock extends more the width? I want to show the string wrap inside the listbox. What am I doing wrong?
Disable horizontal scrolling:
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" ...>
Enable text wrapping (already the case):
<TextBlock TextWrapping="Wrap" ...>