I have a ListView in my page. and i using of ScrollHeader with Mode="Fade"
And for my ItemsPanelTemplate i use of WrapPanel control.
So, my listview items with ScrollHeader content in the form of horizontally aligned together.
I want to be ScrollHeader content be top and stretch horizontally and listview items below ScrollHeader content and form be vertically
My code:
<ListView ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.HorizontalScrollMode="Disabled">
<ListView.Header>
<controls:ScrollHeader VerticalAlignment="Top" Mode="Fade">
<StackPanel>
<Grid Margin="20,20,20,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Ellipse x:Name="imageProfile" extensions:Mouse.Cursor="Hand" Width="75" Opacity=".90">
<Ellipse.Fill>
<ImageBrush ImageSource="{Binding UserDetail.ProfilePicUrl}"/>
</Ellipse.Fill>
</Ellipse>
<Grid Margin="10,0,0,0" Grid.Column="1" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid VerticalAlignment="Top" Margin="5,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel x:Name="panelPostCount" Opacity=".70" HorizontalAlignment="Center">
<TextBlock x:Name="txblblCountPost" Text="{Binding UserDetail.MediaCount, FallbackValue='0'}" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock x:Name="txblblPosts" Text="Posts" Margin="5,0,5,0" FontSize="13" FontWeight="Bold" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel x:Name="panelFollowers" Opacity=".70" Grid.Column="1" Orientation="{Binding Orientation, ElementName=panelPostCount, Mode=TwoWay}" HorizontalAlignment="Center" Tapped="panelFollowers_Tapped">
<TextBlock Text="{Binding UserDetail.FollowerCount, FallbackValue='0'}" FontSize="{Binding FontSize, ElementName=txblblCountPost, Mode=OneWay}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Followers" Margin="5,0,5,0" FontSize="{Binding FontSize, ElementName=txblblPosts, Mode=OneWay}" FontWeight="Bold" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Opacity=".70" Grid.Column="2" Orientation="{Binding Orientation, ElementName=panelPostCount, Mode=TwoWay}" HorizontalAlignment="Center">
<TextBlock Text="{Binding UserDetail.FollowingCount, FallbackValue='0'}" FontSize="{Binding FontSize, ElementName=txblblCountPost, Mode=OneWay}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Following" Margin="5,0,5,0" FontSize="{Binding FontSize, ElementName=txblblPosts, Mode=OneWay}" FontWeight="Bold" VerticalAlignment="Center"/>
</StackPanel>
</Grid>
<Button x:Name="btnEditProfile" Margin="5,10,5,0" Grid.Row="1" extensions:Mouse.Cursor="Hand" HorizontalAlignment="Stretch" Content="Edit Profile" BorderThickness=".5" Opacity=".65" Style="{ThemeResource ButtonRevealStyle}" Click="btnEditProfile_Click"/>
</Grid>
</Grid>
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="15,10,0,0">
<FontIcon Opacity=".80" Visibility="{Binding UserDetail.IsVerified, Converter={StaticResource StringNullOrEmptyToVisiblityConverter}, FallbackValue='Collapsed'}" Glyph="" VerticalAlignment="Center" FontSize="15"/>
<TextBlock Text="{Binding UserDetail.FullName}" Margin="5,0,0,0" Visibility="{Binding UserDetail.FullName, Converter={StaticResource StringNullOrEmptyToVisiblityConverter}, FallbackValue='Collapsed'}" Opacity=".65" FontWeight="Bold"/>
</StackPanel>
<TextBlock Text="{Binding UserDetail.Biography}" Visibility="{Binding UserDetail.Biography, Converter={StaticResource StringNullOrEmptyToVisiblityConverter}, FallbackValue='Collapsed'}" TextWrapping="Wrap" TextAlignment="Left" Opacity=".65" HorizontalAlignment="Left" Margin="15,5,0,0"/>
<HyperlinkButton Content="{Binding UserDetail.ExternalUrl}" Visibility="{Binding UserDetail.ExternalUrl, Converter={StaticResource StringNullOrEmptyToVisiblityConverter}, FallbackValue='Collapsed'}" NavigateUri="{Binding UserDetail.ExternalUrl}" Opacity=".75" HorizontalAlignment="Left" Margin="15,5,0,0"/>
<Grid Height="1" Background="White" Opacity=".10" Margin="10,15,10,0"/>
<Grid Margin="35,10,35,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<FontIcon x:Name="btnGridView" Grid.Column="0" extensions:Mouse.Cursor="Hand" Opacity=".80" Glyph="" Foreground="{ThemeResource SystemAccentColor}" Tapped="btnGridView_Tapped"/>
<FontIcon x:Name="btnSingleView" Grid.Column="1" extensions:Mouse.Cursor="Hand" Opacity=".80" Glyph="" Tapped="btnSingleView_Tapped"/>
<FontIcon Grid.Column="2" extensions:Mouse.Cursor="Hand" Opacity=".80" Glyph=""/>
</Grid>
</StackPanel>
</controls:ScrollHeader>
</ListView.Header>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<controls:WrapPanel />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<templates:InstaMediaTenplate />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="0,15,0,0"/>
<Setter Property="Padding" Value="0"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
I found two ways to accomplish this.
The first is to restyle the ListView to stack the header and items.
<ListView ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.Template>
<ControlTemplate TargetType="ListView">
<Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<StackPanel>
<ContentPresenter Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/>
<ItemsPresenter Padding="{TemplateBinding Padding}"/>
</StackPanel>
</ScrollViewer>
</Border>
</ControlTemplate>
</ListView.Template>
</ListView>
It's important to have the ItemsPresenter not bind the Header property to the header of the ListView.
The second it to change your layout to have the ScrollViewer and header outside of the ListView and using a FadeHeaderBehavior like such
<ScrollViewer ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<interactivity:Interaction.Behaviors>
<behaviors:FadeHeaderBehavior x:Name="FadeBehavior"/>
</interactivity:Interaction.Behaviors>
<StackPanel>
<StackPanel x:Name="Header" Loaded="Header_Loaded">
<!-- Header content here -->
</StackPanel>
<ListView>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListView>
</StackPanel>
</ScrollViewer>
Due to a weird issue with binding the HeaderElement property you need to set it when the header element is loaded
private void Header_Loaded(object sender, RoutedEventArgs e)
{
FadeBehavior.HeaderElement = (UIElement)sender;
}
Related
I have a problem top aligning my stack panels/grids in my WPF window.
Any ideas on what I'm doing wrong? It seems to be occurring when I try to top align content within a listbox, that displays items using a horizontally aligned stackpanel.
If I set the Height of the Grid that holds the ListBox with ItemsSource = {Binding BoardMarkerRows} to say 1400, alignment then starts working correctly (but I wanted this grid to have an auto height).
Screenshot showing alignment off:
Here is my XAML
<Viewbox Grid.ColumnSpan="2" VerticalAlignment="Top">
<StackPanel VerticalAlignment="Top">
<StackPanel Name="StackPanelOptions">
<StackPanel Orientation="Horizontal ">
<Button Content="Init" HorizontalAlignment="Left" Margin="2" VerticalAlignment="Top" Width="75" Click="Init"/>
<Button Content="Rotate" HorizontalAlignment="Left" Margin="2" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>
<Button Content ="Start" Command="{Binding BoardMarkerStartUpdatesCommand}" Margin="2"/>
<Button Content ="Hide" Name="ButtonHideHeader" Margin="2" Click="ButtonHideHeader_Click"/>
<TextBlock Margin="2">
<TextBlock.Text>
<MultiBinding StringFormat="Status: {0}">
<Binding Path="BoardMarker.Status" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock Margin="2">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0} Columns">
<Binding Path="BoardMarker.BoardMarkerColumns.Count " />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBox Height="24" TextWrapping="Wrap" Text="{Binding BoardMarker.MaximumResultDate}" Width="271"/>
<CheckBox Content="Use Maximum Result Date" IsChecked="{Binding BoardMarker.UseMaximumResultDate}"/>
<Label Content="Number Rows"/>
<TextBox Height="24" TextWrapping="Wrap" Margin="2" Text="{Binding BoardMarker.BoardMarkerSettings.NumberRowsPerColumn}" Width="50"/>
<Label Content="Days Offset"/>
<TextBox Height="24" TextWrapping="Wrap" Margin="2" Text="{Binding BoardMarker.DaysOffset}" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="Show All Runners"/>
<TextBox Height="24" TextWrapping="Wrap" Margin="2" Text="{Binding BoardMarker.ShowAll}" Width="300"/>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Vertical " VerticalAlignment="Top">
<StackPanel >
<Viewbox VerticalAlignment="Top" Stretch="Uniform">
<ListBox ItemsSource ="{Binding BoardMarker.BoardMarkerColumns}" Height="Auto" Width="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top">
<ListBox Height="Auto"
ItemsSource="{Binding .BoardMarkerRows}" Margin="5" Width="Auto" HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid >
<Grid Height="Auto" Background="LightGreen" Width="180" Visibility="{Binding ConverterParameter=ArkleEvent
, Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}" VerticalAlignment="Top" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<TextBlock Text="{Binding RowType}" />-->
<TextBlock Text="{Binding ArkleEvent.Name}" Margin="2" Width="Auto" Height="Auto" FontWeight="Bold" />
<TextBlock Grid.Column="1" HorizontalAlignment="Right" Text="{Binding ArkleEvent.Going}" Margin="2" Width="Auto" Height="Auto" />
</Grid>
<Grid Background="LightBlue" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Top" Width="180"
Visibility="{Binding ConverterParameter=ArkleMarket, Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" HorizontalAlignment="Left" FontWeight="Bold">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0:HH:mm} {1}">
<Binding Path="ArkleMarket.ExpectedOffDate" />
<!--<Binding Path="RowType" />-->
<Binding Path="ArkleMarket.RaceLength" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock Grid.Column="1" HorizontalAlignment="Right">
<TextBlock.Text>
<MultiBinding StringFormat=" {0} Run {1} NR">
<Binding Path="ArkleMarket" Converter="{StaticResource ArkleMarketToNumberRunnersConverter}" ConverterParameter="StillRunning" />
<!--<Binding Path="RowType" />-->
<Binding Path="ArkleMarket" Converter="{StaticResource ArkleMarketToNumberRunnersConverter}" ConverterParameter="NR" />
<!--<Binding Path="ArkleMarket" Converter="{StaticResource ArkleMarketToNumberRunnersConverter}" ConverterParameter=",ConverterParameter=NR />-->
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</Grid>
<TextBlock Text="---------------------------------" Margin="0,-3,0,-3" Foreground="DodgerBlue"
Visibility="{Binding ConverterParameter=ArkleSelectionStaticFirst,
Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}"/>
<Grid
Visibility="{Binding ConverterParameter=ArkleSelectionStatic,
Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="88"/>
<ColumnDefinition Width="35"/>
<ColumnDefinition Width="38"/>
</Grid.ColumnDefinitions>
<!--<TextBlock Text="{Binding RowIndex}" Margin="2" Width="Auto" Height="Auto" />-->
<TextBlock Grid.Column="0" Text="{Binding ArkleSelection.SelectionNumber,StringFormat={}{0:00}}" Margin="2" Width="15" />
<TextBlock Grid.Column="1" Text="{Binding ArkleSelection.Name}" Margin="2" Width="100" />
<TextBlock Grid.Column="2" Text="{Binding ArkleSelection.PriceCurrent}" Margin="2" Width="Auto" HorizontalAlignment="Right" />
<TextBlock Grid.Column="3" Text="{Binding ArkleSelection.OpeningPrice}" Margin="2" Width="Auto" Foreground="DarkGray" HorizontalAlignment="Right" TextDecorations="Strikethrough" />
</Grid>
<Grid Visibility="{Binding ConverterParameter=ArkleSelectionRotating, Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="88"/>
<ColumnDefinition Width="35"/>
<ColumnDefinition Width="38"/>
</Grid.ColumnDefinitions>
<!--<TextBlock Text="{Binding RowIndex}" Margin="2" Width="Auto" Height="Auto" />-->
<TextBlock Grid.Column="0" Text="{Binding ArkleSelection.SelectionNumber,StringFormat={}{0:00}}" Margin="2" Width="15" />
<TextBlock Grid.Column="1" Text="{Binding ArkleSelection.Name}" Margin="2" Width="100" />
<TextBlock Grid.Column="2" Text="{Binding ArkleSelection.PriceCurrent}" Margin="2" Width="Auto" HorizontalAlignment="Right" />
<TextBlock Grid.Column="3" Text="{Binding ArkleSelection.OpeningPrice}" Margin="2" Width="Auto" Foreground="DarkGray" HorizontalAlignment="Right" />
</Grid>
<StackPanel Visibility="{Binding ConverterParameter=TextRow,
Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
<Label Content="{Binding Text}" />
</StackPanel>
<Grid Visibility="{Binding ConverterParameter=ArkleSelectionResult,
Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="88"/>
<ColumnDefinition Width="35"/>
<ColumnDefinition Width="38"/>
</Grid.ColumnDefinitions>
<!--<TextBlock Text="{Binding RowIndex}" Margin="2" Width="Auto" Height="Auto" />-->
<TextBlock Grid.Column="0" Text="{Binding ArkleSelection.SelectionNumber,StringFormat={}{0:00}}" Margin="2" Width="15" />
<TextBlock Grid.Column="1" Text="{Binding ArkleSelection.Name}" Margin="2" Width="100" />
<TextBlock Grid.Column="2" Text="{Binding ArkleSelection.PriceCurrent}" Margin="2" Width="Auto" HorizontalAlignment="Right" />
<TextBlock Grid.Column="3" Text="{Binding ArkleSelection.FinishingPosition,Converter={StaticResource ArkleSelectionFinishPositionToOrdinalDisplayText}}" Margin="2" Width="Auto" HorizontalAlignment="Right" />
</Grid>
<StackPanel Visibility="{Binding ConverterParameter=ArkleSelectionNonRunner, Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
<StackPanel Orientation="Horizontal">
<!--<TextBlock Text="{Binding RowIndex}" Margin="2" Width="Auto" Height="Auto" />-->
<TextBlock Text="{Binding ArkleSelection.SelectionNumber,StringFormat={}{0:00}}" Margin="2" Width="15" />
<TextBlock Text="{Binding ArkleSelection.Name}" Margin="2" Width="100" Foreground="DarkGray" />
<TextBlock Text="NR" Margin="2" Width="30" Foreground="DarkGray" />
<TextBlock Text="{Binding ArkleSelection.OpeningPrice}" Margin="2" Width="30" Foreground="DarkGray" />
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Viewbox>
</StackPanel>
</StackPanel>
</StackPanel>
</Viewbox>
</Grid>
Add to the parent-listBox VerticalContentAlignment="Top"
Edit:
Little demo, with minimal changes from the source:
<Viewbox Grid.ColumnSpan="2" VerticalAlignment="Top">
<StackPanel VerticalAlignment="Top">
<StackPanel Orientation="Vertical " VerticalAlignment="Top">
<StackPanel Height="338" >
<Viewbox VerticalAlignment="Top" Stretch="Uniform">
<ListBox VerticalContentAlignment="Top" Height="Auto" Width="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top">
<ListBox Height="Auto" Margin="5" Width="Auto" HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Width="40" Height="40">Some Child</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Items>
<TextBlock />
<TextBlock />
<TextBlock />
</ListBox.Items>
</ListBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Items>
<ListBoxItem>
<TextBlock />
<ListBoxItem.Style>
<Style TargetType="ListBoxItem" >
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate>
<Border Margin="5" Background="Red" Height="150" Width="40" >
<TextBlock >Demo tol item</TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBoxItem.Style>
</ListBoxItem>
<TextBlock />
<TextBlock />
<TextBlock />
</ListBox.Items>
</ListBox>
</Viewbox>
</StackPanel>
</StackPanel>
</StackPanel>
</Viewbox>
I dont have enough reputation to post this as a comment, so I'm posting as an answer.
I believe your problem may be in your ListBox.ItemTemplate:
...
<ListBox.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top">
<ListBox Height="Auto"
ItemsSource="{Binding .BoardMarkerRows}" Margin="5" Width="Auto" HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid > // Missing vertical allignment in this grid
<Grid Height="Auto" Background="LightGreen" Width="180" Visibility="{Binding ConverterParameter=ArkleEvent
, Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}" VerticalAlignment="Top" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<TextBlock Text="{Binding RowType}" />-->
<TextBlock Text="{Binding ArkleEvent.Name}" Margin="2" Width="Auto" Height="Auto" FontWeight="Bold" />
<TextBlock Grid.Column="1" HorizontalAlignment="Right" Text="{Binding ArkleEvent.Going}" Margin="2" Width="Auto" Height="Auto" />
</Grid>
...
I have a listbox which I can successfully update with the data but now I want to access two specific textblocks which I want to collapse and make the other visible. here is my xaml:
<ListBox Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" Name="myPM_MListBox" Margin="-5,0,-5,0" SelectionChanged="myPMListBox_SelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,0" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Margin="5,0,0,0" Background="#FF009E49" BorderThickness="1" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" Text="Message Date" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FFFFFFFF" FontWeight="Normal" />
</Border>
<Border Grid.Row="0" Grid.Column="1" Margin="0,0,5,0" Background="#FFEFEFEF" BorderThickness="1" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" x:Name="PMMessagePubDate" Text="{Binding shdMsgPublishTime}" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF000000" FontWeight="Normal" />
</Border>
<Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,0,5,0" Background="#FFEFEFEF" BorderThickness="1,1,1,0" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" x:Name="PM_MLimitedBody" Text="{Binding shdMessageText}" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF000000" FontWeight="Normal" />
</Border>
<Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,0,5,0" Background="#FFEFEFEF" BorderThickness="1,0,1,1" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" x:Name="PM_MFullBody" Text="Show more..." FontSize="16" HorizontalAlignment="right" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="Blue" FontWeight="Normal" Tapped="ShowFullBody_Tap" />
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I want to hide PM_MLimitedBody textblock and show the PM_MFullBody textblock for the ShowFullBody_Tap event handler I have. But seems like I can't access the Visibility properties of these textblok in my .cs file. is there a way for me to access these textblock's visibility property in my .cs file?
You can use the sender of ShowFullBody_Tap will be the TextBox that defines that event. You can then use VisualTreeHelper.GetParent(...) to get the Border and then the Grid and then look at Grid.Children to find the other borders with their textboxes.
I have following DataTemplate for usage within my phone.LongListSelector in my XAML view:
<DataTemplate x:Name="myLocationsListTemplate">
<StackPanel Margin="0,0,0,15">
<Grid VerticalAlignment="Top" Margin="0,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="120" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" TextTrimming="WordEllipsis" Text="{Binding Name}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" VerticalAlignment="Top" Margin="0,0,0,22" />
<Image Grid.Column="0" Width="138" Height="25" Source="/mAppData/stars-3.png" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0"/>
<TextBlock Grid.Column="1" Text="{Binding DistanceInMeterFormatted, FallbackValue=fallback, TargetNullValue=nullvalue, Mode=OneWay}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" Margin="0,0,-3,20" VerticalAlignment="Bottom"/>
<TextBlock Grid.Column="1" Text="vor 10 min." TextWrapping="NoWrap" Margin="0" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
</Grid>
<Grid VerticalAlignment="Top" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="100" Height="100" Source="{Binding PreviewImg1}"/>
<Image Grid.Column="1" Width="100" Height="100" Source="{Binding PreviewImg2}"/>
<Image Grid.Column="2" Width="100" Height="100" Source="{Binding PreviewImg3}"/>
<Image Grid.Column="3" Width="100" Height="100" Source="{Binding PreviewImg4}"/>
</Grid>
</StackPanel>
</DataTemplate>
Now I want the complete DataTemplate Content made "clickable". Means: If user clicks on a TextBlock or one of the four Images or on whatever displayed in die List, an action should be performed with a databound property (saying the Name from the bound data should be given).
Any ideas how to get this working?
Why don't you just stick your entire template into a button? You can style the button if needs be to remove any default appearance you don't like. eg.
<Style x:Key="BlankButtonStyle" TargetType="ButtonBase">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent" />
</Style>
I have the following Question:
I have a Layout with a Grid and ListViews.
These ListViews will always contain 5 Items.
Now these Items should fill the complete Height of the ListView.
So I thought I get the Height of the ListView an then devide it by 5 and set the Height of each Row to the Result.
But the ListView.Height Property returns strange Values.
I listen to the Window SizeChanged Event.
I hope somebody can tell me how to do it, or if there is a better alternative.
<Window x:Class="KalenderDesingTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Kalender" Height="600" Width="800" SizeChanged="Window_SizeChanged">
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border BorderBrush="#5076A7" BorderThickness="1" CornerRadius="4">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFFFFF" Offset="0.0"/>
<GradientStop Color="#C0D3EA" Offset="1.0"/>
</LinearGradientBrush>
</Border.Background>
<StackPanel TextElement.FontFamily="Segoe UI"
TextElement.FontSize="12">
<TextBlock FontWeight="Bold" Padding="3,0,0,0" Text="{Binding Path=Name}"/>
<TextBlock Padding="3,0,0,0" Text="{Binding Path=Age}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Column="0" Grid.Row="0"
Grid.RowSpan="3" x:Name="NeuerTermin">Neuer Termin</Button>
<Button Grid.Column="2" Grid.Row="0" x:Name="Back">Zurück</Button>
<ComboBox Grid.Column="3" Grid.Row="0" x:Name="Month"></ComboBox>
<Button Grid.Column="4" Grid.Row="0" x:Name="Forward">Vor</Button>
<TextBlock Grid.Column="1" Grid.Row="1" Text="Montag" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="2" Grid.Row="1" Text="Dienstag" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="3" Grid.Row="1" Text="Mittwoch" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="4" Grid.Row="1" Text="Donnerstag" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="5" Grid.Row="1" Text="Freitag" HorizontalAlignment="Center"/>
<StackPanel Orientation="Horizontal" Grid.Column="1"
Grid.Row="2" VerticalAlignment="Stretch">
<CheckBox x:Name="MoV" VerticalAlignment="Center" Margin="0,0,5,0">V</CheckBox>
<CheckBox x:Name="MoN" VerticalAlignment="Center" Margin="0,0,5,0">N</CheckBox>
<CheckBox x:Name="MoT" VerticalAlignment="Center">T</CheckBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="2"
Grid.Row="2" VerticalAlignment="Stretch">
<CheckBox x:Name="DiV" VerticalAlignment="Center" Margin="0,0,5,0">V</CheckBox>
<CheckBox x:Name="DiN" VerticalAlignment="Center" Margin="0,0,5,0">N</CheckBox>
<CheckBox x:Name="DiT" VerticalAlignment="Center">T</CheckBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="3"
Grid.Row="2" VerticalAlignment="Stretch">
<CheckBox x:Name="MiV" VerticalAlignment="Center" Margin="0,0,5,0">V</CheckBox>
<CheckBox x:Name="MiN" VerticalAlignment="Center" Margin="0,0,5,0">N</CheckBox>
<CheckBox x:Name="MiT" VerticalAlignment="Center">T</CheckBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="4"
Grid.Row="2" VerticalAlignment="Stretch">
<CheckBox x:Name="DoV" VerticalAlignment="Center" Margin="0,0,5,0">V</CheckBox>
<CheckBox x:Name="DoN" VerticalAlignment="Center" Margin="0,0,5,0">N</CheckBox>
<CheckBox x:Name="DoT" VerticalAlignment="Center">T</CheckBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="5"
Grid.Row="2" VerticalAlignment="Stretch">
<CheckBox x:Name="FrV" VerticalAlignment="Center" Margin="0,0,5,0">V</CheckBox>
<CheckBox x:Name="FrN" VerticalAlignment="Center" Margin="0,0,5,0">N</CheckBox>
<CheckBox x:Name="FrT" VerticalAlignment="Center">T</CheckBox>
</StackPanel>
<ListView Grid.Column="1" Grid.Row="3" x:Name="lvMoV"></ListView>
<ListView Grid.Column="1" Grid.Row="4" x:Name="lvMoN"></ListView>
<ListView Grid.Column="2" Grid.Row="3" x:Name="lvDiV"></ListView>
<ListView Grid.Column="2" Grid.Row="4" x:Name="lvDiN"></ListView>
<ListView Grid.Column="3" Grid.Row="3" x:Name="lvMiV"></ListView>
<ListView Grid.Column="3" Grid.Row="4" x:Name="lvMiN"></ListView>
<ListView Grid.Column="4" Grid.Row="3" x:Name="lvDoV"></ListView>
<ListView Grid.Column="4" Grid.Row="4" x:Name="lvDoN"></ListView>
<ListView Grid.Column="5" Grid.Row="3" x:Name="lvFrV"></ListView>
<ListView Grid.Column="5" Grid.Row="4" x:Name="lvFrN"></ListView>
</Grid>
</Window>
This is my code behind:
private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
{
int wHeight = (int)lvMoN.Height;
}
I would do like this:
int wHeight = (int)lvMoN.ActualHeight;
How to get the slider's thumb position within the Style? I want to show the actual value at the position of the thumb. This would be possible by changing the width of the following textblock accordingly to the value. But how to get the position of the thumb?
<TextBlock Grid.Column="0" Width="THUMB POSITION" HorizontalAlignment="Right" Grid.Row="0" Text="{Binding Path=Value, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
The full style is shown here:
<Style x:Key="MyCustomStyleForSlider" TargetType="{x:Type Slider}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" MinWidth="{TemplateBinding MinWidth}"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="{Binding Path=Value, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Path=Minimum, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
<TextBlock Grid.Column="2" Grid.Row="1" Text="{Binding Path=Maximum, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
<TickBar Grid.Column="1" x:Name="TopTick" Visibility="Visible" Fill="LightGray" Placement="Top" Height="6" Grid.Row="1"/>
<TickBar Grid.Column="1" x:Name="BottomTick" Visibility="Collapsed" Fill="Green" Placement="Bottom" Height="4" Grid.Row="0"/>
<Border x:Name="TrackBackground" BorderThickness="1" CornerRadius="1" Margin="5,0" VerticalAlignment="Center" Height="4.0" Grid.Row="1" >
<Canvas Margin="-6,-1">
<Rectangle Visibility="Visible" x:Name="PART_SelectionRange" Height="4.0" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Stroke="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" StrokeThickness="1.0"/>
</Canvas>
</Border>
<Track x:Name="PART_Track" Grid.Row="1" Grid.Column="1">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButtonStyle}" BorderBrush="Transparent" Background="Transparent" Foreground="Transparent" Command="{x:Static Slider.DecreaseLarge}"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButtonStyle}" Background="Transparent" Foreground="Transparent" BorderBrush="Transparent" Command="{x:Static Slider.IncreaseLarge}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<!--<Thumb x:Name="Thumb" Background="Black"/>-->
<Thumb x:Name="Thumb" Style="{StaticResource CustomThumbForSlider}" Background="Black"/>
</Track.Thumb>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I found the solution now. I use the ActualWidth of the decrease RepeatButton to get the position of the thumb. I only need a converter because of some offset but it works without any code behind.
Code:
<TextBlock Grid.Column="1" Grid.Row="0" TextAlignment="Right" Foreground="#3B3833"
HorizontalAlignment="Left" Width="{Binding Path=ActualWidth, ElementName=leftToggle,
Converter={StaticResource SliderConverter}, ConverterParameter=140}" Text="{Binding
Path=Value, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
Preview: