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.
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"];
}
}
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
I still haven't found the problem in my code. Maybe, It might not be possible to bind alphakeygroep to Observable Collection?
I'am writing a WP8 application which uses Longlistselector with a JumpList.
Binding works when using LongListSelector without the use of Jumplist.
TrafficFeed implements INotifyPropertyChanged.
Binding in xaml is as follows:
ItemsSource="{Binding feedsA}"
private ObservableCollection<TrafficFeed> feedsA = new ObservableCollection<TrafficFeed>();
public ObservableCollection<TrafficFeed> FeedsA
{
get { return feedsA; }
set { feedsA = value; }
}
When I am adding a JumpList, I need to change my observable collection to:
private ObservableCollection<AlphaKeyGroup<TrafficFeed>> dataSourceAntwerpen = new ObservableCollection<AlphaKeyGroup<TrafficFeed>>();
public ObservableCollection<AlphaKeyGroup<TrafficFeed>> DataSourceAntwerpen
{
get { return dataSourceAntwerpen; }
set { dataSourceAntwerpen = value; }
}
<phone:PivotItem Header="item2">
<phone:LongListSelector SelectionChanged="feedListBox_SelectionChanged"
ItemsSource="{Binding DataSourceAntwerpen}"
x:Name="LongListfeedsA"
JumpListStyle="{StaticResource AddrBookJumpListStyle}"
Background="Transparent"
GroupHeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
ItemTemplate="{StaticResource AddrBookItemTemplate}"
LayoutMode="List"
IsGroupingEnabled="true"
HideEmptyGroups ="true"/>
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="AddrBookItemTemplate">
<StackPanel VerticalAlignment="Top">
<TextBlock TextDecorations="Underline" FontSize="24" Name="feedTitle" TextWrapping="Wrap" Margin="12,0,0,0" HorizontalAlignment="Left" Foreground="{StaticResource PhoneAccentBrush}" Text="{Binding Title}" />
<TextBlock Name="feedSummary" TextWrapping="Wrap" Margin="12,0,0,0" Text="{Binding Description}" />
<TextBlock Name="feedPubDate" Foreground="{StaticResource PhoneSubtleBrush}" Margin="12,0,0,10" Text="{Binding PubDate}" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="AddrBookGroupHeaderTemplate">
<Border Background="Transparent" Padding="5">
<Border Background="{StaticResource PhoneAccentBrush}" BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="2" Width="auto"
Height="62" Margin="0,0,18,0" HorizontalAlignment="Left">
<TextBlock Text="{Binding Key}" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="48" Padding="6"
FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Border>
</Border>
</DataTemplate>
<phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
<phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>
<Style x:Key="AddrBookJumpListStyle" TargetType="phone:LongListSelector">
<Setter Property="GridCellSize" Value="200,100"/>
<Setter Property="LayoutMode" Value="Grid" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Width="200" Height="100" Margin="6" >
<TextBlock Text="{Binding Key}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="48" Padding="6"
Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
Now the binding doesn't work anymore. What should I add?
I am having a problem, I have a datatable data with 3 columns(ID,NAME,QUANTITY), I want to bind it with a ListBox, and make ListBox shows values from column NAME and QUANTITY,otherwise when I double click in a selected item,it will send ID value, here is my XAML:
<ListBox HorizontalAlignment="Left" Margin="6,0,0,0" Name="ListBox1" VerticalAlignment="Top" Height="600" Width="321">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<EventSetter Event="MouseDoubleClick" Handler="ListBox1Item_DoubleClick" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Resources>
<DataTemplate x:Key="listBoxTemplate">
<DockPanel >
<TextBlock FontWeight="Bold" Text="{Binding NAME}"
DockPanel.Dock="Left"
Margin="5,0,10,0" Width="100"/>
<TextBlock Text="{Binding QUANTITY} " Foreground="Green" FontWeight="Bold" />
</DockPanel>
</DataTemplate>
</ListBox.Resources>
</ListBox>
Here is my code behind:
...
ListBox1.ItemsSource = data.DefaultView;
ListBox1.SelectedValuePath = "ID";
...
But it does not show anything, something wrongs? please help! thanks for reading this!
You need to set the ListBox.ItemTemplate.
At the moment you are defining a template with a key, that template is not being used anywhere.
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel >
<TextBlock Text="{Binding NAME}" FontWeight="Bold"
DockPanel.Dock="Left"
Margin="5,0,10,0" Width="100" />
<TextBlock Text="{Binding QUANTITY}" FontWeight="Bold"
Foreground="Green" />
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
I have a ListBox that is bound to a TabControl. Some of the TabItems inside this (TabControl) are hidden/disabled then become visible/enabled when I open a file.
My issue is that these hidden/disabled items are still visible in my ListBox. Can someone help me with regards as to why this is happening?
TabControl XAML
<TabControl Height="Auto" x:Name="tabControl" Width="Auto"
Padding="0" Margin="3" DataContext="{Binding}">
<TabItem Header="StartPage" x:Name="StartTab" Foreground="White" Height="25">
</TabItem>
<TabItem Header="DragDrop" x:Name="DragDropTab" Foreground="White"
Height="25" IsEnabled="False" Visibility="Hidden">
<Image Height="Auto" x:Name="DragImage" Stretch="Fill" Width="Auto" />
</TabItem>
<TabItem Header="Text" x:Name="TextTab" Foreground="White"
Height="25" IsEnabled="False" Visibility="Hidden" >
<Grid>
<cbox:SyntaxHighlightBox Height="Auto" x:Name="HighlightText"
Width="Auto" Text="" AcceptsTab="True" AcceptsReturn="True"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Visible" />
</Grid>
</TabItem>
</TabControl>
ListBox XAML
<ListBox ItemsSource="{Binding Items, ElementName=tabControl}"
x:Name="ShowOpenTabs" >
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}"
BasedOn="{StaticResource {x:Type ListBoxItem}}">
<EventSetter Event="MouseDoubleClick" Handler="OpenOnClick"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You need to bind the ListBox item visibility to the tabcontrol item visibility
<DataTemplate>
<TextBlock Text="{Binding Header}" Visibility="{Binding Path=Visibility}"/>
</DataTemplate>