I have the following xaml:
<UserControl x:Class="MyProject.Word.Addin.Presentation.MainTaskPane"
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:MyProject.Word.Addin.Presentation"
mc:Ignorable="d">
<d:UserControl.DataContext>
<local:MyProjectPaneViewModelHandler />
</d:UserControl.DataContext>
<!--<Grid>-->
<DockPanel Name="MainDockPanel" Background="red">
<local:ExToolBar DockPanel.Dock="Top" />
<Button DockPanel.Dock="Top" Click="ButtonGetHeightDimensions" Content="Show Dimensions" Height="40"></Button>
<TabControl DockPanel.Dock="Top" x:Name="TabControl1" Background="LightSkyBlue">
<TabItem x:Name="Tab1" Background="LightGreen">
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Ellipse Width="10" Height="10" Fill="DarkGray"/>
<TextBlock>Filters</TextBlock>
</StackPanel>
</TabItem.Header>
<ScrollViewer Name="ScrollViewer1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel Name="Tab1StackPanel" Orientation="Vertical" MaxHeight="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}, Path=ActualHeight}" >
<TextBlock FontSize="24" FontWeight="Bold" Foreground="DarkSlateGray" FontStyle="Normal">
Filters
</TextBlock>
<Button x:Name="ClearFiltersButton" Click="ClearFilters_OnClick" Background="DarkRed" Foreground="White"
FontSize="20" FontWeight="Bold" MaxWidth="124" HorizontalAlignment="Left">
Clear Filters
</Button>
<StackPanel Orientation="Horizontal">
<TextBlock>
<Run>Total Paragraphs </Run><Run Text="{Binding ResearchLanguageViewModel.TotalCount}"></Run>
</TextBlock>
</StackPanel>
<ItemsControl ItemsSource="{Binding ResearchLanguageViewModel.Filters, Mode=OneWay}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Type}"></TextBlock>
<TextBox Text="Search...."></TextBox>
<ItemsControl ItemsSource="{Binding Path=Values, Mode=OneWay}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Mode=OneWay}"></CheckBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
</TabItem>
<TabItem x:Name="Tab2">
<TabItem.Header>
<TextBlock>A 2nd Tab</TextBlock>
</TabItem.Header>
<StackPanel Orientation="Horizontal">
<TextBlock>
<Run>Mama always said lifes like a box of chocolates...</Run>
</TextBlock>
</StackPanel>
</TabItem>
</TabControl>
</DockPanel>
<!--</Grid>-->
And the following objects....
public class FilterViewModel
{
public string Type { get; set; }
public ObservableCollection<string> Values { get; set; }
}
public class ResearchLanguageViewModel
{
public int FirmCount { get; set; }
public ObservableCollection<FilterViewModel> Filters { get; set; }
}
I have binding setup using the INotifyPropertyChanged, etc... and all is working. The final issue I have is with the Scrolling of the TabItem content in my first tab. The requirements call for only the tabs with overflowing content to scroll and not the entire tab control. I.e. - the tab headers should still be viewable including controls above the tab control itself and the scroll bars should appear inside of Tab1's TabItem area. I've played with this for hours to no avail. I'm obviously doing something wrong here and could use some assistance.
A bit more detail: The binding on the CheckBox(es) / ItemControls on the Values collection can have upward of 200 - 500 controls and thus causes everything to get knocked out of wack.
you can make use of a Grid container instead of StackPanel, I attempted to make a sample for you
sample
<ScrollViewer Name="ScrollViewer1"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Grid Name="Tab1StackPanel">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock FontSize="24"
FontWeight="Bold"
Foreground="DarkSlateGray"
FontStyle="Normal">
Filters
</TextBlock>
<Button x:Name="ClearFiltersButton"
Grid.Row="1"
Background="DarkRed"
Foreground="White"
FontSize="20"
FontWeight="Bold"
MaxWidth="124"
HorizontalAlignment="Left">
Clear Filters
</Button>
<StackPanel Orientation="Horizontal"
Grid.Row="2">
<TextBlock>
<Run>Total Paragraphs </Run><Run Text="{Binding ResearchLanguageViewModel.TotalCount}"></Run>
</TextBlock>
</StackPanel>
<ItemsControl ItemsSource="{Binding ResearchLanguageViewModel.Filters, Mode=OneWay}"
Grid.Row="3">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Type}"></TextBlock>
<TextBox Text="Search...."></TextBox>
<ItemsControl ItemsSource="{Binding Path=Values, Mode=OneWay}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Mode=OneWay}"></CheckBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</ScrollViewer>
grid with row definitions of auto height behaves same like a stack panel except the last one which uses up the remaining space.
we can adjust it further to match the exact needs
Related
I am developing a windows store app using Universal Windows 8.1 framework. I know it's outdated but my project is suppose to be using this framework so can't help it.
Now the problem is that I have successfully made it horizontal for the desktop, but for the mobile I want it vertical, but it is still showing horizontal. I used gridview for horizontal and for phone listview but still no result.
Here is the xaml code
<Page
x:Class="MedicinesApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MedicinesApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<CollectionViewSource x:Name="FruitsCollectionViewSource" IsSourceGrouped="True"/>
<DataTemplate x:Key="template">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}"/>
<TextBlock Text="{Binding ElementName=listView, Path=DataContext.Test}" Margin="20 0" />
</StackPanel>
</DataTemplate>
</Page.Resources>
<ListView
ItemsSource="{Binding Source={StaticResource FruitsCollectionViewSource}}"
x:Name="FruitGridView"
Padding="30,20,40,0"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="FruitGridView_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" Width="250" Height="250">
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding Path=DiseaseImageSource}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Disease Name" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="30" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Path=DiseaseName}" Style="{StaticResource TitleTextBlockStyle}" Height="30" Margin="15,0,15,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Category of Disease" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,87,10"/>
<TextBlock Text="{Binding Path=CategoryOfDisease}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text='{Binding Key}' Foreground="Gray" Margin="5" FontSize="30" FontFamily="Segoe UI Light" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid MaximumRowsOrColumns="2" Orientation="Vertical" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid GroupPadding="0,0,70,0" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
What am I missing?
Define both datatemplates in XAML resources (give them keys TemplateHori and TemplateVerti for example)
<Page.Resources>
<DataTemplate x:Key="TemplateHori">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}"/>
<TextBlock Text="{Binding ElementName=listView, Path=DataContext.Test}" Margin="20 0" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="TemplateVerti">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding}"/>
<TextBlock Text="{Binding ElementName=listView, Path=DataContext.Test}" Margin="20 0" />
</StackPanel>
</DataTemplate>
</Page.Resources>
add page size changing event in constructor:
public MainPage()
{
this.InitializeComponent();
Window.Current.SizeChanged += Current_SizeChanged;
}
and in page size changing event compare with and height:
void Current_SizeChanged(object sender, Window.UI.Core.WindowSizeChangedEventArgs e)
{
var b=Window.Current.Bounds;
if (b.Width>b.Height)
{
FruitGridView.ItemTemplate = (DataTemplate)Resources["TemplateHori"];
}
else
{
FruitGridView.ItemTemplate = (DataTemplate)Resources["TemplateVerti"];
}
}
There are StackPanels in Listbox. MouseDown does work, but KeyDown - doesn't. KeyDown works in Listbox.
[EDIT: suggestion about "visible" didn't work for me. I post more code, maybe the problem is connected with other circumstances in the code]
<Window x:Class="PWSG_LAB_4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ABCD"
mc:Ignorable="d"
Title="Password Manager" Height="500" Width="700" Icon="abc.png"
Loaded="Window_Loaded">
<Window.Resources>
<local:NumberConverter x:Key="konwert"/>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="400"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Menu IsMainMenu="True" >
<MenuItem Header="Main menu">
<MenuItem Header="Save file" Click="MenuItem_Click" />
<MenuItem Header="Exit" Click="MenuItem_Click" />
</MenuItem>
</Menu>
<TreeView Name="Drzewo" Grid.Row="1" SelectedItemChanged="SelectionChanged">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:TreeElement}" ItemsSource="{Binding Items}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" />
<TextBlock Text=" [" Foreground="Blue" />
<TextBlock Foreground="Blue">
<TextBlock.Text>
<MultiBinding Converter="{StaticResource konwert}" Mode="OneWay">
<Binding ElementName="TreeElementItems.Count"/>
<Binding ElementName="hasla.Count"/>
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock Text="]" Foreground="Blue" />
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
<ListBox Grid.Row="1" Grid.Column="1" Name="listahasel" ItemsSource="{Binding}" AlternationCount="2" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="panelzhaslami" Orientation="Vertical" Height="90" Width="400" Background="Blue" Focusable="True" MouseRightButtonDown="mouseDownPanel" KeyDown="keydownonpanel">
<TextBlock FontSize="20" Text="{Binding placeofwork}" Padding="4"/>
<TextBlock FontSize="14" Text="{Binding login}" Padding="4"/>
<TextBlock FontSize="14" Text="{Binding password}" Padding="4"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ProgressBar Visibility="Hidden" Grid.Row="2" Grid.Column="1" Minimum="0" Height="20" Width="200" Maximum="10" Value="0" Name="Pasek" HorizontalAlignment="Right"/>
</Grid>
If your StackPanel needs to receive keyboard inputs, it must first receive the keyboard focus.
Then, from MSDN, in order for a StackPanel to receive keyboard focus, it must be focusable (Focusable = true) and visible (IsVisible = true). By default, panels are not focusable, so you need to manually set it to focusable.
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Focusable="True"
MouseDown="mouseDownPanel" KeyDown="keydownonpanel">
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
On one of the XAML Pages, I have 3 combo boxes on left side and ListView with Horizontal Scroll on the right.
The three combo boxes are not cascading combo boxes. If I click any of the three combo boxes, under "PopupRoot", some ComboBoxLightDismiss gets generated which has width and height of the entire screen. This leave my screen in the hang state as this is some invisible canvas. I am not able to figure out the reason for this.
Visual Tree before Combo box Click
Visual Tree after Combo Box is click or any item is selected
I am adding the XAML code for the left User Control of the combo boxes as well the page below:
UserControl XAML Code which includes 3 Combo Boxes
<StackPanel Margin="10,0,0,0">
<TextBlock x:Name="textBlockSourceLabel" Text="Source" Margin="0,6,6,6" Style="{StaticResource LeftNavTextBlock}"/>
<ComboBox Height="30" x:Name="comboBoxSourceName" Margin="0,6,6,6" FontSize="14"
Style="{StaticResource NewComboBoxStyle}" ItemContainerStyle="{StaticResource NewComboBoxItem}"
ItemsSource="{Binding Codes,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
SelectedValue="{Binding SourceFile.FeedCode,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Width="250">
<interactivity:Interaction.Behaviors>
<awbehaviors:ComboBoxKeyboardSelection/>
<core:EventTriggerBehavior EventName="SelectionChanged">
<core:InvokeCommandAction Command="{Binding LoadSelectedSourceCommand}" CommandParameter="{Binding SelectedValue, ElementName=comboBoxSourceName}"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</ComboBox>
<TextBlock x:Name="textBlockFiscalMonthLabel" Text="Calendar Month" Margin="0,6,6,6" Style="{StaticResource LeftNavTextBlock}" />
<ComboBox Height="30" x:Name="comboBoxFileFiscalMonth" FontSize="14" Margin="0,6,6,6" Width="250" ItemsSource="{Binding MonthNames}"
DisplayMemberPath="Item1" SelectedValue="{Binding SourceFile.CalendarMonth,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
SelectedValuePath="Item2" Style="{StaticResource NewComboBoxStyle}" ItemContainerStyle="{StaticResource NewComboBoxItem}">
</ComboBox>
<TextBlock x:Name="textBlockFiscalYearLabel" Margin="0,6,6,6" Text="Calendar Year" Style="{StaticResource LeftNavTextBlock}"/>
<ComboBox Height="30" x:Name="comboxBoxFileFiscalYear" Margin="0,6,6,6" FontSize="14"
ItemsSource="{Binding Years,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
SelectedValue="{Binding SourceFile.CalendarYear,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource NewComboBoxStyle}" ItemContainerStyle="{StaticResource NewComboBoxItem}"
Width="250"></ComboBox>
XAML code for Page which includes the ListView and UserControl
<Grid Style="{StaticResource LayoutRootStyle}" x:Name="gridLayout" VerticalAlignment="Stretch">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="80*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="#FFADB9CA">
<UserControls:FeedInformation DataContext="{Binding FeedInformationVM}" HorizontalAlignment="Stretch" Margin="0" Height="{Binding ActualHeight, ElementName=Row1}" Background="{StaticResource gridcontainerBackGroundBrush}"/>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="10*"/>
<RowDefinition Height="90*" x:Name="GridRow"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" x:Name="GridColumn"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" HorizontalAlignment="Stretch" x:Name="titleGrid">
<TextBlock Style="{StaticResource NewHeaderTextStyle}" Text="{Binding FeedSourceFileStatus.FileName}" Margin="10,0,0,0"/>
</Grid>
<Grid Grid.Row="1">
<ListView IsItemClickEnabled="False" IsSwipeEnabled="False" IsDoubleTapEnabled="False" IsTapEnabled="False" SelectionMode="None"
Margin="12,25,50,25" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Height="{Binding ActualHeight, ElementName=GridRow}"
ItemsSource="{Binding SubItemsCollection, ElementName=pgControl, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollBarVisibility="Auto"
ItemContainerStyle="{StaticResource LvItemStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<ListView SelectionMode="None" IsZoomedInView="False" IsHoldingEnabled="False" IsSwipeEnabled="False" x:Name="ListRow" Tag="{Binding RowNo}"
ItemsSource="{Binding FeedData, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Stretch"
VerticalAlignment="Center" ItemContainerStyle="{StaticResource LvItemStyle}" AllowDrop="True"
ShowsScrollingPlaceholders="True" CanDragItems="{Binding RowNo, Converter={StaticResource ListInttoBooleanConverter}}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="35" Width="120" HorizontalAlignment="Center" >
<Rectangle StrokeDashArray="1 1 0.3 1" Height="30" VerticalAlignment="Top" IsHitTestVisible="False" Opacity="0.5"
Stroke="Gray" StrokeThickness="1" Margin="0" StrokeEndLineCap="Square" StrokeDashOffset="1.5"
Visibility="{Binding Tag, Converter={StaticResource RowNotoVisibilityConverter4}, ElementName=ListRow}"
Fill="#FF9DC3E6"/>
<TextBlock Text="{Binding FeedCellData, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
FontSize="12" LineHeight="13" Foreground="{StaticResource TaxHubItemForegroundBrush}" TextTrimming="WordEllipsis" Width="120" AllowDrop="True" Padding="5,1,1,1" TextWrapping="NoWrap"
VerticalAlignment="Top" Tag="{Binding Tag, ElementName=ListRow}" ToolTipService.ToolTip="{Binding FeedCellData}"
Height="{Binding Tag, Converter={StaticResource RowtoHeightConverter}, RelativeSource={RelativeSource Mode=Self}}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Margin="0,0,0,0" Width="Auto" Orientation="Horizontal" Height="35" VirtualizingStackPanel.VirtualizationMode="Standard"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical" VirtualizingStackPanel.VirtualizationMode="Standard"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
</Grid>
</Grid>
I don't seem to figure out the reason for this canvas getting generated when combobox is clicked.
Note: This application is moved from Win 8.1 App to Win 10 UWP app. This seems to be working fine in the 8.1 app which is made compatible with win 10 but this problem is coming from using this in UWP
After debugging, I realized that this is happening because of using VirtualizingStackPanel in the outer ListView. In my ListView, every row has 200 columns. When I removed VirtualizingStackPanel, horizontal scroll bar for the whole List doesnt appear and I am not able to move horizontally. Does anybody can help with this?
I am using the MVVM pattern which is really new to me. I click 'Add Title' and at the moment the textbox shows, and same happens when I click 'Add Question'. The thing that is wrong is that they show up exactly below each other. When they click 'Add Title' I want the text boxes to show with a margin from the left of '20' and then when I click 'Add Question' I want the margin to show as '40'. They also need to have a space of '20' between all text boxes so there not directly underneath the textbox.
XAML CODE:
<Grid>
<Button Content="Add Question" Command="{Binding AddQuestionCommand}" Margin="615,19,179,724" />
<Button Content="Add Title" Command="{Binding AddTitleCommand}" Margin="474,19,320,724" />
<StackPanel>
<ItemsControl ItemsSource="{Binding Title}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{Binding Question}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>
I have tried to add the Padding property but it makes the text boxes bigger in height, and also I have tried the Margin but all text boxes are created dynamically.
Try this
adjust margin according to your requirement
<Grid>
<Button Content="Add Question" Command="{Binding AddQuestionCommand}" Margin="615,19,179,724" />
<Button Content="Add Title" Command="{Binding AddTitleCommand}" Margin="474,19,320,724" />
<StackPanel>
<ItemsControl ItemsSource="{Binding Title}">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="FrameworkElement.Margin" Value="20,20,0,0"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{Binding Question}">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="FrameworkElement.Margin" Value="40,20,0,0"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>
A good way to define appearance structure is using the Grid control, specifying a row and a column.
Try something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ItemsControl Grid.Column="0" ItemsSource="{Binding Title}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl Grid.Column="1" ItemsSource="{Binding Question}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I have a custom control that contains a ComboBox in which I've created multiple data columns.
This works great, but I have been unable to figure out how to head a header row to the top of the drop down with titles for each of the columns. Also, if possible it would love to be able to style it so that the rows alternate colors. Given the XAML below, any ideas of how I can do this?
<UserControl x:Class="ActualsAllocations.LegalEntityDropDown"
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"
d:DesignHeight="28" d:DesignWidth="400">
<UserControl.Resources>
<ResourceDictionary>
<Style x:Key="MainComboStyle" TargetType="{x:Type ComboBoxItem}">
<Style.Triggers>
</Style.Triggers>
</Style >
</ResourceDictionary>
</UserControl.Resources>
<DockPanel>
<Label Name="lblTitle" Width="75" Content="Title" Margin="3,3"/>
<ComboBox Name="cmbMain" HorizontalAlignment="Stretch" Margin="3,3" ItemsSource="{Binding}" ItemContainerStyle="{StaticResource MainComboStyle}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=VersionID}" Width="25" Margin="3,0"/>
<TextBlock Text="{Binding Path=VersionName}" Width="220" Margin="3,0"/>
<TextBlock Text="{Binding Path=EndDate, StringFormat={}{0:M/yyyy}}" Width="50" Margin="3,0" />
<TextBlock Text="{Binding Path=CreatedByUserName}" Width="100" Margin="3,0"/>
<TextBlock Text="{Binding Path=CreateDate}" Width="120" Margin="3,0"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ComboBox>
</DockPanel>
</UserControl>
About alternate colors for rows I would try using ItemTemplateSelector you can read about that here.
For header I would try using CompositeCollection described here.
If you go for this ItemTemplateSelector you don't need to different template for header as it will be already ComboBoxItem and Template will be ignored.
Code for ItemTemplateSelector:
public class CustomTemplateSelector : DataTemplateSelector
{
public DataTemplate EvenTemplate { get; set; }
public DataTemplate OddTemplate { get; set; }
public CollectionViewSource Collection { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
var list = Collection.Source as IList;
if (list != null)
{
if (list.IndexOf(item) % 2 == 0)
{
return EvenTemplate;
}
else
{
return OddTemplate;
}
}
return EvenTemplate;
}
}
Xaml for combobox:
<DockPanel>
<DockPanel.Resources>
<Style x:Key="MainComboStyle" TargetType="{x:Type ComboBoxItem}">
<Style.Triggers></Style.Triggers>
</Style >
<CollectionViewSource x:Key="list" Source="{Binding}"/>
<DataTemplate x:Key="EventTemplate">
<StackPanel Orientation="Horizontal" Background="Red">
<TextBlock Text="{Binding Path=VersionID}" Width="25" Margin="3,0"/>
<TextBlock Text="{Binding Path=VersionName}" Width="220" Margin="3,0"/>
<TextBlock Text="{Binding Path=EndDate, StringFormat={}{0:M/yyyy}}" Width="50" Margin="3,0" />
<TextBlock Text="{Binding Path=CreatedByUserName}" Width="100" Margin="3,0"/>
<TextBlock Text="{Binding Path=CreateDate}" Width="120" Margin="3,0"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="OddTemplate">
<StackPanel Orientation="Horizontal" Background="Green">
<TextBlock Text="{Binding Path=VersionID}" Width="25" Margin="3,0"/>
<TextBlock Text="{Binding Path=VersionName}" Width="220" Margin="3,0"/>
<TextBlock Text="{Binding Path=EndDate, StringFormat={}{0:M/yyyy}}" Width="50" Margin="3,0" />
<TextBlock Text="{Binding Path=CreatedByUserName}" Width="100" Margin="3,0"/>
<TextBlock Text="{Binding Path=CreateDate}" Width="120" Margin="3,0"/>
</StackPanel>
</DataTemplate>
<local:CustomTemplateSelector OddTemplate="{StaticResource OddTemplate}"
EvenTemplate="{StaticResource EventTemplate}"
Collection="{StaticResource list}"
x:Key="customTemplateSelector" />
</DockPanel.Resources>
<Label Name="lblTitle" Width="75" Content="Title" Margin="3,3"/>
<ComboBox Name="cmbMain" HorizontalAlignment="Stretch" Margin="3,3"
ItemTemplateSelector="{StaticResource customTemplateSelector}" >
<ComboBox.ItemsSource>
<CompositeCollection>
<ComboBoxItem IsEnabled="False" Foreground="Black"> VersionID | VersionName | EndDate | CreatedByUser | CreateDate</ComboBoxItem>
<CollectionContainer Collection="{Binding Source={StaticResource list}}"/>
</CompositeCollection>
</ComboBox.ItemsSource>
</ComboBox>
</DockPanel>
You can consider making styling header so it will be nicer. Also you can put part of this dataTemplates in separate control so you can avoid repeating code.