I am currently working on a Windows Phone 8 application in which one I use the LongListSelector control.
I have created an ItemTemplate with a Grid as container and some TextBlock as children. I don't know why, but the Grid container does not match the LongListSelector control.
Here the code I use. I use a blue background for the LongListSelector control and a red one for the Grid control in order to highlight the issue :
<phone:LongListSelector
HorizontalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
ItemsSource="{Binding Data}"
Background="Aqua"
>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid
HorizontalAlignment="Stretch"
Background="Red"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25" />
<ColumnDefinition Width="75" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="47" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="35" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Style="{StaticResource LineStyle}" Text="{Binding Value}" />
<TextBlock Grid.Column="1" Style="{StaticResource LineStyle}" Text="{Binding Value}" />
<TextBlock Grid.Column="2" Style="{StaticResource LineStyle}" Text="{Binding Value}" TextAlignment="Left" TextTrimming="WordEllipsis" />
<TextBlock Grid.Column="3" Style="{StaticResource LineStyle}" Text="{Binding Value}" />
<TextBlock Grid.Column="4" Style="{StaticResource LineStyle}" Text="{Binding Value}" />
<TextBlock Grid.Column="5" Style="{StaticResource LineStyle}" Text="{Binding Value}" />
<TextBlock Grid.Column="6" Style="{StaticResource LineStyle}" Text="{Binding Value}" />
<TextBlock Grid.Column="7" Style="{StaticResource LineStyle}" Text="{Binding Value}" />
</Grid>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
And here the style :
<Style x:Key="LineStyle" TargetType="TextBlock">
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontSize" Value="13" />
<Setter Property="Margin" Value="0, 12" />
<Setter Property="TextAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
And here a screenshot :
How to force the Grid container (the one in red) to match its parents ?
Thank you in advance for your help !
I think it is due to the vertical ScrollBar of the LongListSelector, which adds spaces in the right of the list control.
You can remove this right-spaces by adding the following piece of code in the init of your Page.
MyList.Loaded += (sender, e) =>
{
var scrollBar = ((FrameworkElement)VisualTreeHelper.GetChild(MyList, 0)).FindName("VerticalScrollBar") as ScrollBar;
scrollBar.Margin = new Thickness(-10, 0, 0, 0);
};
Related
I have a uwp desktop application with a listview in which I need to change the background color of items whose given value is empty. I've already done everything indicated by the answer to the question below, but the color doesn't change. Any help is most welcome.
uwp: how to change background color of listview item based on its value?
https://zamjad.wordpress.com/2010/01/01/applying-style-conditionally/
XAML
<Page.Resources>
<Style x:Key="SpeechLineTimingSet" TargetType="ListViewItem">
<Setter Property="Background" Value="Transparent" />
</Style>
<Style x:Key="SpeechLineTimingNotSet" TargetType="ListViewItem">
<Setter Property="Background" Value="Red" />
</Style>
<local:SpeechLineListViewStyleSelector x:Key="SpeechLineListViewStyleSelectorObject"
SpeechLineTimingSetStyle="{StaticResource SpeechLineTimingSet}"
SpeechLineTimingNotSetStyle="{StaticResource SpeechLineTimingNotSet}"/>
</Page.Resources>
<ListView x:Name="dtgSpeechLines" Grid.Column="0" Grid.Row="2" Margin="3,0,3,3"
BorderBrush="Gray" BorderThickness="1" ScrollViewer.HorizontalScrollBarVisibility="Auto"
ItemContainerStyleSelector="{StaticResource SpeechLineListViewStyleSelectorObject}"
DoubleTapped="dtgSpeechLines_DoubleTapped">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.HeaderTemplate>
<DataTemplate>
<Grid Padding="12" Margin="3,5,3,5" Background="{ThemeResource SystemBaseLowColor}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" x:Uid="CtrPgLvwColumn0" Style="{ThemeResource CaptionTextBlockStyle}"/>
<TextBlock Grid.Column="1" x:Uid="CtrPgLvwColumn1" Style="{ThemeResource CaptionTextBlockStyle}"/>
<TextBlock Grid.Column="2" x:Uid="CtrPgLvwColumn2" Style="{ThemeResource CaptionTextBlockStyle}"/>
<TextBlock Grid.Column="3" x:Uid="CtrPgLvwColumn3" Style="{ThemeResource CaptionTextBlockStyle}"/>
<TextBlock Grid.Column="4" x:Uid="CtrPgLvwColumn4" Style="{ThemeResource CaptionTextBlockStyle}"/>
<TextBlock Grid.Column="5" x:Uid="CtrPgLvwColumn5" Style="{ThemeResource CaptionTextBlockStyle}"/>
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="3,5,3,5" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" TextWrapping="Wrap" FontSize="12" Text="{Binding Number}" />
<TextBlock Grid.Column="1" TextWrapping="Wrap" FontSize="12" Text="{Binding OriginalText}"/>
<TextBlock Grid.Column="2" TextWrapping="Wrap" FontSize="12" Text="{Binding TextForAudio}"/>
<TextBlock Grid.Column="3" TextWrapping="Wrap" FontSize="12" Text="{Binding SubtitleNumber}"/>
<TextBlock Grid.Column="4" TextWrapping="Wrap" FontSize="12" Text="{Binding Start}"/>
<TextBlock Grid.Column="5" TextWrapping="Wrap" FontSize="12" Text="{Binding Length}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
CODE BEHIND
public class SpeechLineListViewStyleSelector : StyleSelector
{
public Style SpeechLineTimingSetStyle { get; set; }
public Style SpeechLineTimingNotSetStyle { get; set; }
protected override Style SelectStyleCore(object item, DependencyObject container)
{
SpeechLine speechLine = item as SpeechLine;
if (speechLine != null)
{
if (speechLine.Start == "")
{
return SpeechLineTimingNotSetStyle;
}
else
{
return SpeechLineTimingSetStyle;
}
}
return base.SelectStyleCore(item, container);
}
}
Please remove the ListView.ItemContainerStyle that you defined in the ListView. It overrides the style that you defined in the StyleSelector. Just put the HorizontalContentAlignment setting in the styles in the SpeechLineListViewStyleSelector.
Like:
<Style x:Key="SpeechLineTimingSet" TargetType="ListViewItem">
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
<Style x:Key="SpeechLineTimingNotSet" TargetType="ListViewItem">
<Setter Property="Background" Value="Red" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
And:
I have a listview with a grid and elements inside. One is a textblock and I want to show a Segoe MDL2 icon if binded property is true, or another if it's false (named MListEntryControl). All examples I have read are for pre-UWP or didn't understand well how visualstatetriggers can be of use for this especific need. Thank you.
<ListView x:Name="MovementsList" Grid.Row="3" Grid.ColumnSpan="3" Margin="0,12,0,0" IsItemClickEnabled="False" SelectionMode="None" MinHeight="40">
<ListView.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Name="MListProvider" Text="{Binding Company.Name}" HorizontalAlignment="Stretch" Margin="0,0,12,0" ></TextBlock>
<TextBlock Name="MListProduct" Text="{Binding Product.Name}" HorizontalAlignment="Stretch" Margin="0,0,12,0" Grid.Column="1"></TextBlock>
<TextBlock Name="MListTemp" Text="{Binding Temperature}" HorizontalAlignment="Stretch" Margin="0,0,12,0" Grid.Column="2"></TextBlock>
<TextBlock x:Name="MListEntryControl" Grid.Column="3" FontFamily="Segoe MDL2 Assets" FontSize="22" Text=""></TextBlock>
<Button Click="DeleteMovement_Click" Tag="{Binding MovementId}" Grid.Column="4" HorizontalAlignment="Center">
<TextBlock Text="" FontFamily="Segoe MDL2 Assets" FontSize="22"></TextBlock>
</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Background" Value="#E0E4CC"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
UWP Change text inside a listview in XAML using binded boolean property
For your scenario, I think the DataTrigger of XamlBehaviors package is suite for you and may be easier. When the binding data updated can trigger a ChangePropertyAction. You can reference the DataTrigger sample here.
For example, if the boolean property named "trueorfalse", code sample as follows:
<TextBlock
x:Name="MListEntryControl"
Grid.Column="3"
FontSize="22"
Text="">
<Interactivity:Interaction.Behaviors>
<Interactions:DataTriggerBehavior
Binding="{Binding trueorfalse}"
Value="true" ComparisonCondition="Equal">
<Interactions:ChangePropertyAction
PropertyName="FontFamily"
TargetObject="{Binding ElementName=MListEntryControl}"
Value="Segoe MDL2 Assets" />
</Interactions:DataTriggerBehavior>
<Interactions:DataTriggerBehavior
Binding="{Binding trueorfalse}"
Value="false" ComparisonCondition="Equal">
<Interactions:ChangePropertyAction
PropertyName="FontFamily"
TargetObject="{Binding ElementName=MListEntryControl}"
Value="Yu Gothic UI" />
</Interactions:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</TextBlock>
Good morning
I have a Wpf datagrid that is displaying an observable collection of a custom type
I group the data using a collection view source in XAML on two seperate properties, and I have styled the groups to display as expanders.
For clarity, as there is a lot of data I feel I have to use margins and spacing otherwise things look very cluttered.
My problem is that with two levels of hierarchical expanders the column data is now substantially offset from the column headers meaning that they do not properly line up.
I have tried several thing, like setting the margin of the column headers and the width (both actual and normal). However all of my attempts end up resizing the whole column so that the offset stays the same but the columns move.
so my question:
How can I change the visible width or offset of a column header to ensure that the headers line up with the data
Visual Studio 2012
Wpf
C#
DataGrid
EDIT This is what I mean
EDIT 2 - MY Xaml for Grouping
<!-- Style for groups at top level. -->
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander Margin="5,10,5,5"
BorderBrush="{StaticResource BlackBrush}"
BorderThickness="1"
Header="{Binding Name}"
IsExpanded="True">
<Expander.Template>
<!-- The basic expander -->
<ControlTemplate TargetType="{x:Type Expander}">
<!-- Put a border around the expander -->
<Border Background="{Binding Path=Name,
Converter={StaticResource ColourConverter}}"
BorderBrush="{StaticResource GreyBrush}"
BorderThickness="2"
CornerRadius="3">
<!-- Use a dock panel so that the toggle button is docked to the top and the content is docked to the bottom -->
<DockPanel Margin="0">
<!-- Add the toggle button -->
<ToggleButton x:Name="ExpanderButton"
Margin="0"
Content="{TemplateBinding Header}"
DockPanel.Dock="Top"
FontSize="14"
FontWeight="Bold"
Foreground="{StaticResource BlackBrush}"
IsChecked="{Binding Path=IsExpanded,
RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True"
Template="{StaticResource AnimatedExpanderButton}" />
<ContentPresenter x:Name="ExpanderContent"
Margin="5"
ContentSource="Content"
DockPanel.Dock="Bottom"
Visibility="{Binding ElementName=ExpanderButton,
Path=IsChecked,
Converter={StaticResource VisibilityConverter}}" />
</DockPanel>
</Border>
</ControlTemplate>
</Expander.Template>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
<!-- Style for groups under the top level. -->
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0,0,0,5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander Margin="5"
Background="{Binding Path=Name,
Converter={StaticResource ColourConverter}}"
IsExpanded="True"
Visibility="{Binding Items[0].IsSelectedInSidebar,
Converter={StaticResource VisibilityConverter}}">
<Expander.Template>
<!-- The basic expander -->
<ControlTemplate TargetType="{x:Type Expander}">
<!-- Put a border around the expander -->
<Border Background="{Binding Path=Name,
Converter={StaticResource ColourConverter}}"
BorderBrush="{StaticResource GreyBrush}"
BorderThickness="2"
CornerRadius="3">
<!-- Use a dock panel so that the toggle button is docked to the top and the content is docked to the bottom -->
<DockPanel Margin="0">
<!-- Add the toggle button -->
<ToggleButton x:Name="ExpanderButton"
Content="{Binding Path=Name}"
DockPanel.Dock="Top"
FontSize="12"
IsChecked="{Binding Path=IsExpanded,
RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True"
Template="{StaticResource AnimatedExpanderButton}" />
<ContentPresenter x:Name="ExpanderContent"
Margin="5"
ContentSource="Content"
DockPanel.Dock="Bottom"
Visibility="{Binding ElementName=ExpanderButton,
Path=IsChecked,
Converter={StaticResource VisibilityConverter}}" />
</DockPanel>
</Border>
</ControlTemplate>
</Expander.Template>
<Expander.Content>
<Border BorderBrush="{StaticResource BlackBrush}" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ItemsPresenter Grid.Row="0" Margin="0" />
<Border Grid.Row="1"
Margin="0,10,0,0"
BorderBrush="{StaticResource BlackBrush}"
BorderThickness="0,1,0,0"
Visibility="{Binding Data.SettingRepository.MainDataSummaryVisible,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}">
<Grid Background="{StaticResource WhiteBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.ColumnSpan="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Margin="5"
FontWeight="Bold"
Text="{Binding Path=Items[0].Option1Title}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="1"
Margin="5"
Text="{Binding Path=Items[0].Option1Data,
Mode=OneWay}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="2"
Margin="5"
FontWeight="Bold"
Text="{Binding Path=Items[0].Option2Title}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="3"
Margin="5"
Text="{Binding Path=Items[0].Option2Data,
Mode=OneWay}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="4"
Margin="5"
FontWeight="Bold"
Text="{Binding Path=Items[0].Option3Title}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="5"
Margin="5"
Text="{Binding Path=Items[0].Option3Data,
Mode=OneWay}" />
<TextBlock Grid.Column="6"
Margin="5"
FontWeight="Bold"
Text="{Binding Path=Items[0].Option4Title}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="7"
Margin="5"
Text="{Binding Path=Items[0].Option4Data,
Mode=OneWay}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="8"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.SampleIsAnnealedColumnHeader}" />
<CheckBox Grid.Column="9"
Margin="3,5,5,5"
IsChecked="{Binding Path=Items[0].SampleIsAnnealed,
Mode=OneWay}"
IsHitTestVisible="False"
Style="{StaticResource FandFCheckBox}" />
</Grid>
<!-- The mean Match temperature -->
<TextBlock Grid.Row="1"
Grid.Column="0"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.MeanSampleMatchTemperatureTitle}" />
<TextBlock Grid.Row="1"
Grid.Column="1"
Margin="5"
Text="{Binding Path=Items[0].SampleMeanMatchTemperature,
Mode=OneWay,
StringFormat=\{0:N2\}}" />
<!-- The match temperature range -->
<TextBlock Grid.Row="1"
Grid.Column="2"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.SampleTemperatureRangeTitle}" />
<TextBlock Grid.Row="1"
Grid.Column="3"
Margin="5"
Text="{Binding Path=Items[0].SampleMatchTemperatureRange}" />
<!-- The match temperature standard deviation -->
<TextBlock Grid.Row="1"
Grid.Column="4"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.SampleTemperatureStandardDeviationTitle}" />
<TextBlock Grid.Row="1"
Grid.Column="5"
Margin="5"
Text="{Binding Path=Items[0].SampleMatchTemperatureStandardDeviation,
Mode=OneWay,
StringFormat=\{0:N3\}}" />
<!-- The mean refractive index -->
<TextBlock Grid.Row="2"
Grid.Column="0"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.SampleMeanRefractiveIndexTitle}" />
<TextBlock Grid.Row="2"
Grid.Column="1"
Margin="5"
Text="{Binding Path=Items[0].SampleMeanRefractiveIndex,
Mode=OneWay,
StringFormat=\{0:N5\}}" />
<!-- The refractive index range -->
<TextBlock Grid.Row="2"
Grid.Column="2"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.SampleRIRangeTitle}" />
<TextBlock Grid.Row="2"
Grid.Column="3"
Margin="5"
Text="{Binding Path=Items[0].SampleRefractiveIndexRange}" />
<!-- The refractive index standard deviation -->
<TextBlock Grid.Row="2"
Grid.Column="4"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.SampleRIStandardDeviationTitle}" />
<TextBlock Grid.Row="2"
Grid.Column="5"
Margin="5"
Text="{Binding Path=Items[0].SampleRefractiveIndexStandardDeviation,
Mode=OneWay,
StringFormat=\{0:N7\}}" />
</Grid>
</Border>
</Grid>
</Border>
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
You can set the ColumnHeaderStyle and there set a RenderTransform that moves the headers to the right.
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="RenderTransform">
<Setter.Value>
//change the X value accordingly
<TranslateTransform X="100"></TranslateTransform>
</Setter.Value>
</Setter>
</Style>
</DataGrid.ColumnHeaderStyle>
EDIT 2:
As you mentioned, doing this will result in a small gap. To remove it you should set the left margin of the first column to a negative value, which stretches the header of this column to the left. You can do it like this:
<DataGridTemplateColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
//change the margin accordingly
<Setter Property="Margin" Value="-100 0 0 0" />
<Setter Property="RenderTransform">
<Setter.Value>
//change the X value accordingly
<TranslateTransform X="100"></TranslateTransform>
</Setter.Value>
</Setter>
</Style>
</DataGridTemplateColumn.HeaderStyle>
You have to set the RenderTransform here again, because this style overwrites the general ColumnHeaderStyle. To remove duplication you can add the render transfrom as a resource.
EDIT:
I just saw that you have a few margins on your Expanders and ContentPresenters. If you change them so that you have 0 margin to the left, it would align the content more to the left and reduce the alignment difference.
You would then need less offset on the RenderTransform.
Some examples of your code to illustrate what I mean:
<Expander Margin="5,10,5,5"
<ContentPresenter x:Name="ExpanderContent" Margin="5"
If you change it to
<Expander Margin="0,10,5,5"
<ContentPresenter x:Name="ExpanderContent" Margin="0 5 5 5"
the columns move more to the left.
I am trying to create a app to display tabular list (ID, Name, Lname) in the windows 8 phone.
My XAML file is as below
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style x:Key="ListBoxStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="{StaticResource PhoneSemitransparentBrush}" />
<Setter Property="Margin" Value="3,5" />
<Setter Property="FontSize" Value="20" />
<Setter Property="BorderBrush" Value="{StaticResource PhoneBorderBrush}" />
<!-- Replace the default item template with a basic template that does not highlight selected items. -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SummaryStyle" TargetType="TextBlock">
<Setter Property="Margin" Value="5" />
<Setter Property="Width" Value="75" />
<Setter Property="HorizontalAlignment" Value="Left" />
</Style>
</Grid.Resources>
<StackPanel Orientation="Horizontal">
<TextBlock Text="ID" Width="100" />
<TextBlock Text="Name" Width="150"/>
<TextBlock Text="LName" Width="150"/>
</StackPanel>
<ScrollViewer Margin="-5,13,3,36" Height="558">
<ListBox Name="lstBox"
ItemsSource="{Binding}"
Height="380" HorizontalAlignment="Left" Margin="5,25,0,0"
VerticalAlignment="Top" Width="444" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ID}" />
<TextBlock Text="{Binding FName}" />
<TextBlock Text="{Binding LName}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
and I call the below code on the button click even
List<Customers> cust = new List<Customers>();
cust.Add(new Customers(1, "Ganesh", "S"));
cust.Add(new Customers(2, "Shan", "S"));
cust.Add(new Customers(3, "Anjan", "A"));
lstBox.ItemsSource = cust;
But, it does not display the list it is just showing the column. These customer name should display as in windows 8 phone
ID Name LName
1 Ganesh S
2 Shan S
3 Anjan A
What is missing in the code? or What should I follow while to display multi column list in windows 8 phone?
You have defined three columns but the StackPanel is placed in the first column (default behavior), hence i guess that you are not able to view the data.
Or probably you can assign the header TextBlocks to the grid (remove the stackpanel) and within the itemtemplate define another grid with similar width which should help you achieve the layout.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Text="ID" Width="100" Grid.Column="0"/>
<TextBlock Text="Name" Width="150" Grid.Column="1"/>
<TextBlock Text="LName" Width="150" Grid.Column="2"/>
and then your template like
<ListBox.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding ID}" Grid.Column="0"/>
<TextBlock Text="{Binding FName}" Grid.Column="1"/>
<TextBlock Text="{Binding LName}" Grid.Column="2"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
(not tested code just re arranged as per your post) hope this helps
Create a Grid inside the StackPanel. In that create a column.
Here it looks like:
<ScrollViewer Margin="-5,13,3,36" Height="558">
<ListBox Name="lstBox"
ItemsSource="{Binding}"
Height="380" HorizontalAlignment="Left" Margin="5,25,0,0"
VerticalAlignment="Top" Width="444" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Specify width" />
<ColumnDefinition Width="Specify width" />
<ColumnDefinition Width="Specify width" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding ID}" Grid.Column="0" />
<TextBlock Text="{Binding FName}" Grid.Column="1" />
<TextBlock Text="{Binding LName}" Grid.Column="2" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
Firstly, thank you for taking the time out to read this post. All contributions are very much appreciated.
I'm having difficulty understanding how I can bind a ComboBox ItemsSource within a DataTemplate to an ObservableCollection.
Here's my code thus far:
DataTemplate Template (notice the combo's at the bottom of the template):
<DataTemplate x:Key="ListBoxCustomTemplate">
<Grid Margin="4" HorizontalAlignment="Stretch" x:Name="lstBoxItemRoomGrid" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" FontWeight="Bold" Text="{Binding TemplateGroupName}" />
<Image x:Name="imgDeleteListBoxItem" Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" Source="/Icons/Print-Groups-Config/delete-32.png" Height="25" Cursor="Hand"
ToolTip="Remove template" VerticalAlignment="Center"
HorizontalAlignment="Right" MouseLeftButtonUp="imgDeleteListBoxItem_MouseLeftButtonUp">
<Image.Style>
<Style>
<Setter Property="Image.Visibility" Value="Hidden" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=lstBoxItemRoomGrid}" Value="True">
<Setter Property="Image.Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding TemplateDescription}" TextWrapping="WrapWithOverflow" />
<!-- Header Template Selection -->
<Label Grid.Row="2" Grid.Column="0" Margin="0,3,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="Select Header:" FontWeight="DemiBold" Foreground="DarkGray" />
<telerik:RadComboBox x:Name="radComboHeaderTemplate" Grid.Row="3" Grid.Column="0" Width="120" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"
ClearSelectionButtonVisibility="Visible" SelectedValue="{Binding TemplateHeaderID}" />
<!-- Footer Template Selection -->
<Label Grid.Row="2" Grid.Column="1" Margin="0,3,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="Select Footer:" FontWeight="DemiBold" Foreground="DarkGray" />
<telerik:RadComboBox x:Name="radComboFooterTemplate" Grid.Row="3" Grid.Column="1" Width="120" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"
ClearSelectionButtonVisibility="Visible" SelectedValue="{Binding TemplateFooterID}" />
</Grid>
</DataTemplate>
When my Window loads, I download the collection data from my database and store into a local collection. Note that there are two Collections, one for each of the 2 ComboBoxes in my DataTemplate.
//Header Templates
private ObservableCollection<TemplateHeaderFooter> templatesHeader = new ObservableCollection<TemplateHeaderFooter>();
//Footer Templates
private ObservableCollection<TemplateHeaderFooter> templatesFooters = new ObservableCollection<TemplateHeaderFooter>();
//--- Constructors ---
public PrintTemplateGroupsConfigWindow()
{
InitializeComponent();
//Download Data From DB
this.templatesHeader = TemplateHeaderFootersDB.GetAllTemplatesOfType(1);
this.templatesFooters = TemplateHeaderFootersDB.GetAllTemplatesOfType(2);
}
How do I get the collection Data templatesFooters & templatesHeader into the the ItemsSources of their respective ComboBoxes?
The datatemplate is for a ListBox.
<telerik:RadListBox x:Name="lstBoxPrintGroupTemplates" Height="300" Width="280" ItemsSource="{Binding}" IsEnabled="False"
ItemTemplate="{StaticResource ListBoxCustomTemplate}" Style="{StaticResource DraggableListBox}" >
Many thanks. Any help is appreciated.
Define properties wrappers over the variables of your collections and then you can bind them to comboboxes as:
ItemsSource="{Binding TemplatesHeader, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
public ObservableCollection<TemplateHeaderFooter> TemplatesHeader
{
get{return templatesHeader;}
}
Similarly you can do for other property