Binding to RotateTransform in DataTemplate - c#

I have a DataTemplate for my list items which looks like this:
<DataTemplate x:Key="MyDataTemplate">
<Grid Height="60">
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="88"/>
<ColumnDefinition Width="310"/>
<ColumnDefinition Width="72"/>
</Grid.ColumnDefinitions>
<Image MaxHeight="48" MaxWidth="40" Grid.Column="0" VerticalAlignment="Center" Source="{Binding ImageUrl}"/>
<TextBlock Text="{Binding Name}" Grid.Column="1"/>
<ContentPresenter x:Name="AnimatedIndicator" Grid.Column="2" RenderTransformOrigin="0.5, 0.5">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<Image Source="/Assets/Images/arrow.png" CacheMode="BitmapCache" Width="30" Height="30" Stretch="Uniform"/>
</DataTemplate>
</ContentPresenter.ContentTemplate>
<ContentPresenter.RenderTransform>
<RotateTransform x:Name="AnimatedIndicatorRotate" Angle="{Binding IsRotated, Converter={StaticResource IsRotatedToAngleConverter}}"/>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
</Grid>
</DataTemplate>
My problem is that the binding in the RotateTransform does not work, and the converter does not get called.
So when I animate the angle with a storyboard, after some scrolling because of the virtualization the angle is reset, and binding to the IsRotated property should fix this, but it does not work.

Related

How do I stretch my grid inside a ListView

I'm trying to stretch the orange grid so that it fills out horizontally, currently it only fills out the length of the textblock that's inside. Why is that?
<ListView ItemsSource="{Binding Users}"
Grid.Column="0">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="50"
Background="Orange"
HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle RadiusX="20" RadiusY="20"
Width="30" Height="30">
<Rectangle.Fill>
<SolidColorBrush Color="Orange" />
</Rectangle.Fill>
</Rectangle>
<StackPanel Grid.Column="1"
VerticalAlignment="Center"
HorizontalAlignment="Stretch">
<TextBlock Text="{Binding }"
FontWeight="Bold"
HorizontalAlignment="Stretch"/>
</StackPanel>
<Grid.Effect>
<DropShadowEffect Opacity=".1"
BlurRadius="10"
Direction="280"/>
</Grid.Effect>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This is what it looks like

I forgot to add HorizontalContentAlignment="Stretch" to the ListView.
<ListView ItemsSource="{Binding Users}"
Grid.Column="1"
HorizontalContentAlignment="Stretch">

UWP: Listview when loaded for first time shows a grey background for less than a second and then disappears before the actual content

Whenever the listview is loaded for the first time, it displays a flash of grey background for less than half a second and then disappears before the actual content is loaded. My code is as follows (pretty straight forward) Any thoughts?
<ListView Name="FilterCategories" SelectionMode="None"
FlowDirection="LeftToRight" >
<ListView.ItemContainerTransitions>
<TransitionCollection/>
</ListView.ItemContainerTransitions>
<ListView.ItemTemplate>
<DataTemplate x:DataType="filter:FilterCategory">
<Grid Name="FilterHeaders">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<TextBlock Name="Header" FontSize="13" FontWeight="Bold"
Margin="20,10,0,0" Text="{x:Bind NameAlias}"
Opacity="{x:Bind Opacity}"
Grid.Column="0"/>
</Grid>
<RelativePanel Grid.Column="1" Margin="0,5,15,0">
<TextBlock Name="DownArrow" Text="" FontFamily="Segoe MDL2 Assets" FontSize="8"
Visibility="{x:Bind IsCollapsed}" Grid.Column="1" TextAlignment="Left"
FontWeight="Bold"
Tapped="DownArrow_Tapped" RelativePanel.AlignRightWithPanel="True" Margin="0,10,10,0">
</TextBlock>
<TextBlock Name="UpArrow" Text="" FontFamily="Segoe MDL2 Assets" FontSize="8"
Visibility="{x:Bind IsExpand}" RelativePanel.AlignRightWithPanel="True"
TextAlignment="Left" FontWeight="Bold"
Tapped="UpArrow_Tapped" Margin="0,10,10,0">
</TextBlock>
</RelativePanel>
<Grid Grid.Row="1" Grid.ColumnSpan="2"
Visibility="{Binding ElementName=UpArrow,Path=Visibility}"
Margin="10,10,0,0">
<ListView SelectionMode="None" ItemsSource="{x:Bind FilterCategoryItems}"
ScrollViewer.VerticalScrollMode="Enabled">
<ListView.ItemContainerTransitions>
<TransitionCollection/>
</ListView.ItemContainerTransitions>
<ListView.ItemTemplate>
<DataTemplate x:DataType="filter:FilterCategoryItem">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<CheckBox x:Name="FilterCheckBoxTask" Style="{StaticResource CheckBoxStylePlainView}"
IsThreeState="False" Opacity="0.2"
MinWidth="10" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Text="{x:Bind NameAlias}" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
<Border BorderThickness="0,0,0,1" Height="10"
HorizontalAlignment="Stretch"
BorderBrush="#f0f0f0" Grid.Row="2" Grid.ColumnSpan="2"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The item source is being set dynamically in the code behind

ListView with ScrollHeader and WrapPanel (ItemsPanel.ItemsPanelTemplate)

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;
}

Control not being hidden when binding source is null

I have set viewmodel as page's datacontext, and binding pivot items with an Individual collection property. However the binding is working correctly when there is data, but initially when data is not available it is not working properly, I basically want to hide the textbox below the ItemsControl but don't know whats wrong with this code.
<phone:PivotItem Header="Tweets" Margin="{StaticResource PivotItemMargin}" DataContext="{Binding Tweets}">
<ScrollViewer>
<StackPanel>
<ItemsControl ItemsSource="{Binding Result}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,30">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="75" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.RowSpan="2" Source="{Binding userImage}" Margin="0,0,10,0" MaxWidth="100" MaxHeight="100" Stretch="UniformToFill" Visibility="{Binding userImage, Converter={StaticResource NullToVisibilityConverter}}" />
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding name}" Foreground="{StaticResource AppForegroundHighlightTextBrush}" TextWrapping="NoWrap" TextTrimming="WordEllipsis" FontSize="{StaticResource TitleFontSize}"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding ShortTitle}" Foreground="{StaticResource AppForegroundSubtextBrush}" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="{StaticResource SubtextFontSize}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBlock DataContext="{Binding Tweet}" Grid.Row="2" Text="all Tweets" FontWeight="Bold" Visibility="{Binding hasMore,Converter={StaticResource BooleanToVisibilityConverter}}"/>
</StackPanel>
</ScrollViewer>
</phone:PivotItem>

When DataContext is null, binding will use value specified in TargetNullValue property. Therefore, try to set TargetNullValue property of Visibility binding to Collapsed and you won't even need converter :
.......
<Image
.......
Visibility="{Binding userImage, TargetNullValue=Collapsed}"
/>
.......

InitializeComponent InvalidCastExeption

In my app I'm having a ListBox that I have already set it's ItemTemplate, and it's working just fine. But after facing some problems I decided to change the ListBox into an ItemsControl,
So I just changed the ListBox keyword with ItemsControl, (whitch I don't know if it's allowed). But when I run the app an InvalidCastExeption is unhandeled at the InitializeComponent.
I am still new to programming so can anyone help me with this?
EDIT:
<ListBox Name="ChannelsSearchResaultList" Visibility="Collapsed" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Name="ChannelContainer" Margin="5" Width="470"
HorizontalAlignment="Stretch" BorderBrush="BlueViolet"
BorderThickness="2" Background="#FF1D1D1D" MouseLeftButtonDown=
"Border_MouseLeftButtonDown" MouseLeftButtonUp=
"ChannelContainer_MouseLeftButtonUp">
<Grid Height="110">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="340"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Logo}" Margin="5"/>
<TextBlock Text="{Binding Duration}" Margin="10,5"
VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
<Canvas Grid.Column="1" >
<TextBlock Text="{Binding Title}" FontWeight="Bold"
Foreground="Red"/>
<TextBlock Text="{Binding Views}" Canvas.Top="60"
Canvas.Left="20" />
</Canvas>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Categories