I want to design a Control Similar to this, where to the left corner would be Some Text and right corner will have Checkbox mark.
I tried doing something like this.
<ListView x:Name="MyListView">
<ListView.ItemTemplate>
<DataTemplate x:Name="DoubleLineDataTemplate" >
<CheckBox IsChecked="{Binding IsChecked}">
<StackPanel Orientation="Horizontal">
<Image VerticalAlignment="Center" Source="{Binding Img}">
</Image>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
<TextBlock Text="{Binding Name}" />
</StackPanel>
</StackPanel>
</CheckBox>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
But the output isn't what I want.
you can put Image, text and checkbox in a single Grid and stick text and checkbox to corners:
<ListView x:Name="MyListView">
<ListView.ItemTemplate>
<DataTemplate x:Name="DoubleLineDataTemplate" >
<Grid>
<Image VerticalAlignment="Center" Source="{Binding Img}"/>
<TextBlock Text="{Binding Name}"
VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5"/>
<CheckBox IsChecked="{Binding IsChecked}"
VerticalAlignment="Top" HorizontalAlignment="Right" Margin="5"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
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?
<DataTemplate x:Key="ItemTemplate">
<DockPanel Width="Auto">
<Button DockPanel.Dock="Top" Tag="{Binding id}">
<Button.Template>
<ControlTemplate >
<Image Source="{Binding image}"/>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Text="{Binding title}" HorizontalAlignment="Center" DockPanel.Dock="Bottom"/>
</DockPanel>
</DataTemplate>
<Grid x:Name="LeftGrid" Grid.Row="2" Grid.Column="0" >
<Border BorderThickness="1" BorderBrush="Red">
<ItemsControl ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding DisplayMovies.View}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="5"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Border>
</Grid>
I am setting the Tag value of each Button to the value of id. Whenever a Button is selected, I would like to pass this Tag value to a property in my ViewModel.
Could someone please help me out with how I can achieve this? I've always bound from ViewModel to XAML and never the other way around
I should also mention that Binding id is not referring to my ViewModel. It is referring to a property in ItemsSource="{Binding DisplayMovies.View}"
Do you mean something like this?
<Button
Command="{Binding DataContext.YourVmCommand,
RelativeSource={RelativeSource
AncestorType={x:Type ItemsControl}}}}"
CommandParameter="{Binding Id}"
DockPanel.Dock="Top" >
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
How can every item inside the ItemsControl - here it is a TextBox - show vertical scrollbars ?
I do not want a vertical scrollbar around all Expanders.
Thats the code I tried:
<ItemsControl ScrollViewer.HorizontalScrollBarVisibility="Hidden" ItemsSource="{Binding Path=ErrorLogs}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel IsVirtualizing="True" VirtualizationMode="Recycling"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander Margin="0" Header="{Binding FileName}" Background="Green">
<Controls:BindableTextBox Background="Red"
Text="{Binding Content, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
You have two options
1, wrap inside a scrollviewer
<DataTemplate>
<Expander Margin="0"
Header="{Binding FileName}"
Background="Green">
<ScrollViewer VerticalScrollBarVisibility="Visible">
<Controls:BindableTextBox Background="Red"
Text="{Binding Content, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</ScrollViewer>
</Expander>
</DataTemplate>
2, enable multiline on textbox
eg.
<DataTemplate>
<Expander Margin="0"
Header="{Binding FileName}"
Background="Green">
<TextBox Background="Red"
AcceptsReturn="True" TextWrapping="Wrap"
Text="{Binding Content, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</Expander>
</DataTemplate>
I am not sure about Controls:BindableTextBox so using multiline depends on availability