It should be looks like such as on the image
I have an list view with custom DataTemplate. I have to autofill all free space with ellipsis in Description TextBlock.
Do you have any idea how i can do this?
<ListView ItemsSource="{Binding Items}" HorizontalAlignment="Stretch">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="16" Height="16" Source="{Binding Type, Converter={StaticResource NodeIconConverter}}" />
<TextBlock Grid.Column="1" Text="{Binding Tittle}" ToolTip="{Binding Description}" />
<Image Grid.Column="2" Width="16" Height="16" Source="{Binding Status, Converter={StaticResource NodeStatusConverter}}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You can update your DataTemplate like below to have dotted line between space:
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="16" Height="16" Source="{Binding Type, Converter={StaticResource NodeIconConverter}}" />
<TextBlock Grid.Column="1" Text="{Binding Tittle}" ToolTip="{Binding Description}" />
<Rectangle Grid.Column="2" Margin="2,5,2,0" Stroke="#FF000000" Height="1" StrokeThickness="1" StrokeDashArray="1 4"
SnapsToDevicePixels="True"/>
<Image Grid.Column="3" Width="16" Height="16" Source="{Binding Status, Converter={StaticResource NodeStatusConverter}}" />
</Grid>
</DataTemplate>
Related
I have an interface with some tabs in it on the right side of the screen. I need each tab`s width to be resized by width of the context in it.
All the other tabs do it apart from this one...
Any suggestions, please?
Description
The scales tab in the stackup editor doesn’t resize when selected.
Select the scales tab on the right side of the stackup editor
Right hand tab doesn’t resize
Expected Behaviour
Tab resizes to fit content, as with all other tabs in the stackup
editor
enter image description here
<infrastructure:Plugin x:Class="Xact.GeminiX.Plugin.PanelEditors.Views.DisplayScalesView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:infrastructure="clr-namespace:Xact.GeminiX.Client.Common.Infrastructure;assembly=Xact.GeminiX.Client.Common"
xmlns:converters="clr-namespace:Xact.GeminiX.Client.Wpf.Common.Converters;assembly=Xact.GeminiX.Client.Wpf.Common"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
LayoutUpdated="ViewLayoutUpdated"
Loaded="Plugin_Loaded">
<infrastructure:Plugin.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"></BooleanToVisibilityConverter>
<converters:BooleanToVisibilityHiddenOnFalseConverter x:Key="BooleanToVisibilityHiddenOnFalseConverter"></converters:BooleanToVisibilityHiddenOnFalseConverter>
<infrastructure:DataContextProxy x:Key="DataContextProxy"/>
</infrastructure:Plugin.Resources>
<i:Interaction.Behaviors>
<infrastructure:DataContextProxyBehavior DataContextProxy="{StaticResource DataContextProxy}"/>
</i:Interaction.Behaviors>
<Grid Grid.IsSharedSizeScope="True" PreviewMouseWheel="UIElement_OnPreviewMouseWheel">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.Resources>
<ContextMenu x:Key="ImportContextMenu"
ItemsSource="{Binding DataContext.ScalingImportExportMetaData.ScalingImportFormats, Source={StaticResource DataContextProxy}}">
<ContextMenu.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Header"
Value="{Binding FormatTitle}"/>
<Setter Property="Command"
Value="{Binding DataContext.FormatSelectionCommand, Source={StaticResource DataContextProxy}}"/>
<Setter Property="CommandParameter"
Value="{Binding}"/>
</Style>
</ContextMenu.ItemContainerStyle>
</ContextMenu>
<ContextMenu x:Key="ImportFromStackupContextMenu">
<MenuItem Header="{Binding StoredLocalisation}" Click="ButtonImportFromStackupStored_OnClick"/>
<MenuItem Header="{Binding RemakesLocalisation}" Click="ButtonImportFromStackupRemakes_OnClick"/>
</ContextMenu>
<ContextMenu x:Key="ContextMenu" ItemsSource="{Binding DataContext.ScalingImportExportMetaData.ScalingExportFormats, Source={StaticResource DataContextProxy}}">
<ContextMenu.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Header"
Value="{Binding FormatTitle}"/>
<EventSetter Event="Click"
Handler="MenuItem_OnClick"/>
</Style>
</ContextMenu.ItemContainerStyle>
</ContextMenu>
<DataTemplate x:Key="ExportButtonTemplate">
<telerik:RadButton Content="{Binding TypeTitle}" Click="ButtonBase_OnClick" IsEnabled="{Binding Enabled}" ContextMenu="{StaticResource ContextMenu}" Margin="2"/>
</DataTemplate>
</Grid.Resources>
<ScrollViewer VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="Auto"
HorizontalAlignment="Left"
HorizontalContentAlignment="Left"
Grid.Column="0">
<Grid>
<Grid.Resources>
<converters:BooleanInvertConverter x:Key="BooleanInvertConverter"></converters:BooleanInvertConverter>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" SharedSizeGroup="B"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto" SharedSizeGroup="C"/>
<RowDefinition Height="Auto" SharedSizeGroup="D"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Loaded="TopGrid_OnLoaded" HorizontalAlignment="Left" x:Name="Grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding LayerLocalisation}" Margin="5" />
<TextBlock Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding FirstScaleFactorLocalisation}" HorizontalAlignment="Center" Margin="5" />
<TextBlock Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="2" Text="{Binding SecondScaleFactorLocalisation}" HorizontalAlignment="Center" Margin="5" />
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding ArtworkLocalisation}" HorizontalAlignment="Center" Margin="5" />
<TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding PredictedLocalisation}" HorizontalAlignment="Center" Margin="5" />
<TextBlock Grid.Row="1" Grid.Column="3" Text="{Binding ArtworkLocalisation}" HorizontalAlignment="Center" Margin="5" />
<TextBlock Grid.Row="1" Grid.Column="4" Text="{Binding PredictedLocalisation}" HorizontalAlignment="Center" Margin="5" />
<Border Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="5"
BorderThickness="0, 1, 0, 0"
Margin="0, 5, 0, 5"
BorderBrush="LightGray" />
<TextBlock Grid.Row="3"
Grid.Column="0"
Text="{Binding AllLocalisation}"
VerticalAlignment="Center"
Margin="5" />
<TextBox x:Name="EnabledTemplate"
Grid.Row="3"
Grid.Column="1"
Margin="5"
Text="{Binding ShortValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
KeyDown="SetShortValues_OnKeyDown"
TextChanged="ShortValueTextbox_TextChanged"
Width="80"
IsEnabled="{Binding ScalesExist}"
MaxLength="10" />
<telerik:RadButton Grid.Row="3"
Grid.Column="2"
Content="{Binding SetFirstLocalisation}"
Click="SetShortButton_OnClick"
IsEnabled="{Binding ScalesExist}"
Margin="2"/>
<TextBox Grid.Row="3"
Grid.Column="3"
Margin="5"
Text="{Binding LongValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
KeyDown="SetLongValues_OnKeyDown"
TextChanged="ShortValueTextbox_TextChanged"
Width="80"
IsEnabled="{Binding ScalesExist}"
MaxLength="10" />
<telerik:RadButton Grid.Row="3"
Grid.Column="4"
Content="{Binding SetSecondLocalisation}"
Click="SetLongButton_OnClick"
IsEnabled="{Binding ScalesExist}"
Margin="2"/>
<CheckBox Grid.Row="4"
Grid.Column="0"
IsEnabled="{Binding ScalesExist}"
IsChecked="{Binding AllCheckboxIsChecked}"
Margin="5"
Click="SetAllCheckBoxToggled" />
<telerik:RadButton Grid.Row="4"
Grid.Column="2"
Content="{Binding PredictedSwapLocalisation}"
Click="PredictedShortButton_OnClick"
IsEnabled="{Binding PredictionsAvailable}"
AutomationProperties.AutomationId="PredictedShortButtonID"
x:Name="PredictedShortButtonID"
Margin="2"/>
<telerik:RadButton Grid.Row="4"
Grid.Column="4"
Content="{Binding PredictedSwapLocalisation}"
Click="PredictedLongButton_OnClick"
IsEnabled="{Binding PredictionsAvailable}"
AutomationProperties.AutomationId="PredictedLongButtonID"
x:Name="PredictedLongButtonID"
Margin="2"/>
<Border Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="5" BorderThickness="0, 1, 0, 0" Margin="0, 10, 0, 10" BorderBrush="LightGray" />
</Grid>
<Grid Grid.Row="1">
<ScrollViewer HorizontalAlignment="Left" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden" Name="ScrollViewer" ScrollChanged="ScrollViewer_OnScrollChanged">
<Grid>
<Grid.Resources>
<DataTemplate x:Key="RowsTemplate">
<Grid x:Name="TemplateGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" IsChecked="{Binding IsChecked}" VerticalAlignment="Center" Margin="5" IsEnabled="{Binding Editable}"
Command="{Binding Path=DataContext.CheckBoxChangedCommand, ElementName=Grid}" CommandParameter="{Binding}" />
<TextBlock Grid.Column="1" Text="{Binding Layer}" VerticalAlignment="Center" Margin="5" />
</Grid>
<TextBox Grid.Column="1"
Text="{Binding ShortDisplayValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
IsEnabled="{Binding Editable}"
Width="80"
Margin="5"
TextChanged="ShortValueTextbox_TextChanged"
KeyDown="FirstUIElement_OnKeyDown"
LostFocus="FirstUIElement_OnLostFocus" />
<telerik:RadButton Grid.Column="2"
Command="{Binding Path=DataContext.SetSinglePredictedShortCommand, ElementName=Grid}"
CommandParameter="{Binding}"
IsEnabled="{Binding Editable}"
Visibility="{Binding Visible}" HorizontalContentAlignment="Left"
Margin="2">
<telerik:RadButton.Content>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Label Background="{Binding ConfidenceBrush}" Foreground="{Binding ConfidenceForegroundBrush}" Height="20" Width="20" Content="{Binding ConfidenceCharacter}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Margin="0"></Label>
<TextBlock Text="{Binding ShortButton}" />
</StackPanel>
</telerik:RadButton.Content>
</telerik:RadButton>
<TextBox Grid.Column="3"
Text="{Binding LongDisplayValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
IsEnabled="{Binding Editable}"
Width="80"
Margin="5"
TextChanged="ShortValueTextbox_TextChanged"
KeyDown="SecondUIElement_OnKeyDown"
LostFocus="SecondUIElement_OnLostFocus" />
<telerik:RadButton Grid.Column="4"
Command="{Binding Path=DataContext.SetSinglePredictedLongCommand, ElementName=Grid}"
CommandParameter="{Binding}"
IsEnabled="{Binding Editable}"
Visibility="{Binding Visible}" HorizontalContentAlignment="Left"
Margin="2">
<telerik:RadButton.Content>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Label Background="{Binding ConfidenceBrush}" Foreground="{Binding ConfidenceForegroundBrush}" Height="20" Width="20" Content="{Binding ConfidenceCharacter}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Margin="0"></Label>
<TextBlock Text="{Binding LongButton}" />
</StackPanel>
</telerik:RadButton.Content>
</telerik:RadButton>
</Grid>
</DataTemplate>
</Grid.Resources>
<ItemsControl ItemTemplate="{StaticResource RowsTemplate}" ItemsSource="{Binding Rows}" />
</Grid>
</ScrollViewer>
</Grid>
<Border Grid.Row="2" BorderThickness="0, 1, 0, 0" Margin="0, 0, 0, 10" BorderBrush="LightGray" />
<Grid Grid.Row="3" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A" />
<ColumnDefinition SharedSizeGroup="A" />
<ColumnDefinition SharedSizeGroup="A" />
<ColumnDefinition SharedSizeGroup="A" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<telerik:RadButton Grid.Row="0" Grid.Column="0"
Content="{Binding SwapAllLocalisation}"
Click="SwapAllButton_OnClick"
IsEnabled="{Binding ScalesExist}"
HorizontalAlignment="Center"
Margin="2"/>
<telerik:RadButton Grid.Row="0" Grid.Column="1"
Content="{Binding SetAllPredictedLocalisation}"
Click="SetAllPredictedButton_OnClick"
IsEnabled="{Binding PredictionsAvailable}"
HorizontalAlignment="Center"
Margin="2"/>
<telerik:RadButton Grid.Row="0" Grid.Column="2"
Content="{Binding ResetLocalisation}"
Click="ResetButton_OnClick"
IsEnabled="{Binding ScalesExist}"
HorizontalAlignment="Center"
Margin="2"/>
<telerik:RadButton Grid.Row="0" Grid.Column="3"
Content="{Binding ArtworkRevisionsLocalisation}"
Click="ArtworkRevisionsButton_OnClick"
HorizontalAlignment="Center"
IsEnabled="{Binding ArtworksButtonEnabled}"
Visibility="{Binding ArtworksButtonVisible, Converter={ StaticResource BooleanToVisibilityHiddenOnFalseConverter}}"
Margin="2"/>
<telerik:RadButton Grid.Row="1" Grid.Column="0"
Content="{Binding ImportLocalisation}"
Click="ButtonImport_Click"
IsEnabled="{Binding ScalesExist}"
ContextMenu="{StaticResource ImportContextMenu}"
HorizontalAlignment="Center"
Margin="2"/>
<telerik:RadButton Grid.Row="1" Grid.Column="1"
Content="{Binding StackupImportLocalisation}"
Click="ButtonImportFromStackup_OnClick"
ContextMenu="{StaticResource ImportFromStackupContextMenu}"
IsEnabled="{Binding CanImportFromStackup}"
Visibility="{Binding ImportFromStackupEnabled, Converter={StaticResource BooleanToVisibilityConverter}}"
HorizontalAlignment="Center"
Margin="2"/>
<ItemsControl Grid.Row="1" Grid.Column ="2" Grid.ColumnSpan="2" ItemsSource="{Binding ScalingImportExportMetaData.ScalingExportTypes}" ItemTemplate="{StaticResource ExportButtonTemplate}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<Grid Grid.Row="2" Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Grid.ColumnSpan="4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal">
<TextBlock Text="{Binding SingleCoresLocalisation}" VerticalAlignment="Center"/>
<RadioButton IsChecked="{Binding UseSingleCores}" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Horizontal">
<TextBlock Text="{Binding IndividualCopperLocalisation}" VerticalAlignment="Center"/>
<RadioButton IsChecked="{Binding UseSingleCores, Converter={ StaticResource BooleanInvertConverter}}" VerticalAlignment="Center"/>
</StackPanel>
</Grid>
</Grid>
</Grid>
</ScrollViewer>
<Grid Grid.Column="1">
<Grid.Resources>
<converters:NonZeroDoubleToVisibilityConverter x:Key="NonZeroDoubleToVisibilityConverter" />
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="B"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition SharedSizeGroup="C"></RowDefinition>
<RowDefinition SharedSizeGroup="D"></RowDefinition>
</Grid.RowDefinitions>
<ScrollBar Grid.Row="1" Minimum="0" SmallChange="1" LargeChange="10"
ViewportSize="{Binding ViewportHeight, ElementName=ScrollViewer}"
Maximum="{Binding ScrollableHeight, ElementName=ScrollViewer}"
Scroll="ScrollBar_OnScroll" Name="ScrollBar"
Visibility="{Binding RelativeSource={RelativeSource Self}, Path=Maximum, Converter={StaticResource NonZeroDoubleToVisibilityConverter}}" />
</Grid>
</Grid>
</infrastructure:Plugin>
Three textBlocks are on a button. It is desired to have Column 0 and 2 textBlocks anchored at the left and right edges of the button respectively while column 1 textblock takes up the excess space. How can this be accomplished?
<Grid Width="150" Height="50">
<Button
Style="{StaticResource GrayStyleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
FontSize="12"
Text="+">
</TextBlock>
<TextBlock
Grid.Column="1"
FontSize="12"
Text="Page1_b2">
</TextBlock>
<TextBlock
Grid.Column="2"
FontSize="12"
Text="+">
</TextBlock>
</Grid>
</Button>
</Grid>
Provide HorizontalAlignment="Stretch" for both button and Grid
<Button HorizontalContentAlignment="Stretch">
<Grid Width="{Binding}" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
FontSize="12"
Text="+" />
<TextBlock Grid.Column="1"
FontSize="12"
Text="Page1_b2" />
<TextBlock Grid.Column="2"
FontSize="12"
Text="+" />
</Grid>
</Button>
<Grid Width="150" Height="50">
<Button Style="{StaticResource GrayStyleButton}">
<StackPanel Orientation="Horizontal">
<Image Style="{StaticResource BlockArrowLeftWhite}"
Height="{StaticResource fontSize}" HorizontalAlignment="Left">
</Image>
<TextBlock FontSize="{StaticResource fontSize}" Text="Page1_b2" HorizontalAlignment="Center"/>
<Image Style="{StaticResource BlockArrowLeft}" Height="{StaticResource fontSize}" HorizontalAlignment="Right">
</Image>
</StackPanel>
</Button>
</Grid>
I hope that you took proper margin values and other indentation properties in you static style resources.
Currently having an issue where the header of my ListView is larger than my ListView Items, so the header doesn't line up properly. I could use a margin on the header as a hack to fix it, but surely there's a proper way to fix this?
<DataTemplate x:Key="HeaderTemplate" >
<Grid Height="36" Background="#99999999" Margin="0,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Uid="Name" TextWrapping="Wrap" HorizontalAlignment="Left" Text="Project" Grid.Column="0" Style="{StaticResource BodyTextBlockStyle}" />
<TextBlock x:Uid="Qty" TextWrapping="Wrap" HorizontalAlignment="Left" Text="Qty" Grid.Column="1" Style="{StaticResource BodyTextBlockStyle}" />
<TextBlock x:Uid="SubTotal" TextWrapping="Wrap" HorizontalAlignment="Left" Text="Sub Total" Grid.Column="2" Style="{StaticResource BodyTextBlockStyle}" />
<TextBlock x:Uid="Total" TextWrapping="Wrap" HorizontalAlignment="Left" Text="Total" Grid.Column="3" Style="{StaticResource BodyTextBlockStyle}" />
</Grid>
</DataTemplate>
// ...
<ListView x:Name="CartGridView" ItemsSource="{Binding CartItmes}" HeaderTemplate="{StaticResource HeaderTemplate}"
Grid.Row="1" VerticalAlignment="Stretch" Width="auto" ItemContainerStyle="{StaticResource SimpleListViewItemStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="auto" Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Style="{StaticResource BodyTextBlockStyle}" HorizontalAlignment="Left"
Text="{Binding Name, Mode=TwoWay}"/>
<TextBlock Grid.Column="1" Style="{StaticResource BodyTextBlockStyle}" HorizontalAlignment="Center"
Text="{Binding Qty, Mode=TwoWay}"/>
<TextBlock Grid.Column="2" Style="{StaticResource BodyTextBlockStyle}" HorizontalAlignment="Left"
Text="{Binding SubTotal, Mode=TwoWay}"/>
<TextBlock Grid.Column="3" Style="{StaticResource BodyTextBlockStyle}" HorizontalAlignment="Center"
Text="{Binding Total, Mode=TwoWay}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Add the following to your ListView definition
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
I want to create a TreeView that is hierarchical. But I don't want to create the ItemsTemplate in the < StackPanel.Resources > because that will affect my virtualization. That is to say, I don't want to use ItemsSource="{Binding Source={StaticResource dataItems}} in the TreeView. Here is my XAML. Could someone suggest another way to create a TreeView with an ItemsTemplate so that I can preserve virtualization?
<StackPanel>
<StackPanel.Resources>
<exportImport:TreeViewDashboard x:Key="dataItems"/>
<HierarchicalDataTemplate DataType="{x:Type exportImport:TreeViewDashboard}"
ItemsSource="{Binding Path=Components}">
<Grid Margin="2" >
<Grid.ColumnDefinitions>
<ColumnDefinition ></ColumnDefinition>
<ColumnDefinition ></ColumnDefinition>
<ColumnDefinition ></ColumnDefinition>
</Grid.ColumnDefinitions>
<CheckBox Name="checkbx" Grid.Column="0" Margin="2"
Tag="{Binding Path=Tag}"
Checked="OnCheck" Unchecked="OnUnCheck"></CheckBox>
<Image Margin="2" Grid.Column="1" Source="{Binding Path=ImageUrl}"
Height="14" Width="16" ></Image>
<TextBlock Margin="2" Grid.Column="2" Text="{Binding Path=Name}"
FontWeight="Bold" />
</Grid>
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<Grid Margin="2" >
<Grid.ColumnDefinitions>
<ColumnDefinition ></ColumnDefinition>
<ColumnDefinition ></ColumnDefinition>
<ColumnDefinition ></ColumnDefinition>
</Grid.ColumnDefinitions>
<CheckBox Name="checkbx" Grid.Column="0" Margin="2"
Tag="{Binding Path=Tag}"
Checked="OnCheck" Unchecked="OnUnCheck"/>
<Image Margin="2" Grid.Column="1"
Source="{Binding Path=ImageUrl}"
Height="14" Width="16" />
<TextBlock Margin="2" Grid.Column="2"
Text="{Binding Path=Name}" FontWeight="Bold" />
</Grid>
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</StackPanel.Resources>
<TreeView Name="tvES" BorderThickness="0"
ItemsSource="{Binding Source={StaticResource dataItems}}"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling"
TreeViewItem.Expanded="item_Expanded"
TreeViewItem.Collapsed="item_Collapsed" >
<TreeView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
</TreeView.ItemsPanel>
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="False" />
</Style>
</TreeView.ItemContainerStyle>
</TreeView>
</StackPanel>
I made a calender using a grid. It has 7 columns, and 6 rows. By getting the day of the week and the week of the month I can figure out how to place the dates on the grid of the date choosen. However grids only show ugly grid lines. How can I change this to use a datagrid so that I can have solid gridlines like a calender should look. Or is there any other way I can get rid of the dashed grid lines to make it look better? Thanks in advance.
XAML: I make a ItemsControl and in that is the grid with the 7 columns and 6 rows.
<Grid Name="mainGrid">
<Grid Name="controlGrid" Margin="0,56,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="297*" />
<ColumnDefinition Width="290*" />
</Grid.ColumnDefinitions>
<ItemsControl ItemsSource="{Binding schedule}" Name="Calender" VerticalAlignment="Stretch" Grid.ColumnSpan="2">
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl" >
<Border BorderBrush="Aqua" BorderThickness="4">
<ItemsPresenter/>
</Border>
</ControlTemplate>
</ItemsControl.Template>
<!-- ItemsPanelTemplate -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid ShowGridLines="True" Name="gridCalender">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock OpacityMask="Black" Name="txtBlockdays">
<Button Content="{Binding day}" Width="175" HorizontalAlignment="Stretch" VerticalAlignment="Top" VerticalContentAlignment="Top" HorizontalContentAlignment="Left" Background="#FF94EBEB">
</Button>
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
<!-- ItemContainerStyle -->
<ItemsControl.ItemContainerStyle>
<Style >
<Setter Property="Grid.Column" Value="{Binding WeekDay}" />
<Setter Property="Grid.Row" Value="{Binding WeekNo}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</Grid>
<Grid Name="dayGrid" VerticalAlignment="Top" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Content="Monday" Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="label2" VerticalAlignment="Bottom" Grid.Column="1" FontSize="16" />
<Label Content="Tuesday" Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="label3" VerticalAlignment="Bottom" Grid.Column="2" FontSize="16" />
<Label Content="Wednesday" Height="Auto" HorizontalAlignment="Stretch" Name="label4" VerticalAlignment="Bottom" Grid.Column="3" Margin="0" FontSize="16" />
<Label Content="Thursday" Height="Auto" HorizontalAlignment="Stretch" Name="label5" VerticalAlignment="Bottom" Grid.Column="4" Margin="0" FontSize="16" />
<Label Content="Friday" Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="label6" VerticalAlignment="Bottom" Grid.Column="5" FontSize="16" />
<Label Content="Saturday" Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="label7" VerticalAlignment="Bottom" Grid.Column="6" FontSize="16" />
<Button Content="<" Height="23" HorizontalAlignment="Left" Margin="0,1,0,0" Name="btnDateLeft" VerticalAlignment="Top" Width="29" Click="btnDateLeft_Click" />
<Button Content=">" Height="23" HorizontalAlignment="Left" Margin="26,1,0,0" Name="btnDateRight" VerticalAlignment="Top" Width="30" Click="btnDateRight_Click" />
<Label Content="Sunday" Name="label1" Width="Auto" FontSize="16" Margin="0,19,0,0" />
</Grid>
<Label HorizontalAlignment="Left" Margin="62,1,0,0" Name="lblDate" VerticalAlignment="Top" FontSize="15" FontWeight="Bold" Height="32" />
</Grid>
Adjust your ItemContainerStyle and set ShowGridlines to false.
<ItemsControl.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="Grid.Column" Value="{Binding WeekDay}" />
<Setter Property="Grid.Row" Value="{Binding WeekNo}" />
<Setter Property="Control.BorderBrush" Value="Black" />
</Style>
</ItemsControl.ItemContainerStyle>
Also note that you can also place a Rectangle in each box which you cold also style accordingly. there are many ways to achieve what you are after.