I'm trying to create a scrolling news feed purly using XAML and am having some trouble with the feed being cut off. right now I'm just using some fake news headlines in my XmlDataProvider, but they will be coming from an RSS feed.
<Window.Resources>
<XmlDataProvider x:Key="NewsFeed" XPath="/rss/Channel/Item">
<x:XData>
<rss xmlns="">
<Channel>
<Item>
<Headline>Cash-Strapped Oklahoma To Conduct Executions By Hammering Squad</Headline>
</Item>
<Item>
<Headline>PetSmart Manager Does Morning Sweep Of Enclosures For Dead Ones Before Opening Doors For Day</Headline>
</Item>
<Item>
<Headline>Lovestruck Arabian Princess Begs Father To Spare John Kerry’s Life</Headline>
</Item>
<Item>
<Headline>Frantic Joe Biden Searching Dog Shelter For Bo Look-Alike</Headline>
</Item>
<Item>
<Headline>Pope Tweets Picture Of Self With God</Headline>
</Item>
<Item>
<Headline>Wes Welker Fielding Offers From Numerous Concussion Researchers</Headline>
</Item>
</Channel>
</rss>
</x:XData>
</XmlDataProvider>
</Window.Resources>
Here is the grid with the Item control that contains the animated text.
<Grid Background="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="45" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Label Content="RSS" FontSize="16" Margin="10,0,0,0" FontStyle="Italic" Foreground="White" />
<ItemsControl Grid.Row="0" Grid.Column="1" Margin="10,0,10,0" Height="35" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Padding="0" DataContext="{Binding Source={StaticResource NewsFeed}, XPath=/rss/Channel/Item}" ItemsSource="{Binding XPath=//Headline}">
<!-- -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" Width="Auto" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Border BorderBrush="CadetBlue" BorderThickness="2" Height="Auto" Padding="0" HorizontalAlignment="Stretch" VerticalAlignment="Center" ClipToBounds="True">
<StackPanel ClipToBounds="True">
<StackPanel.RenderTransform>
<TranslateTransform x:Name="translate" />
</StackPanel.RenderTransform>
<StackPanel.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation From="1000" To="-1000" Storyboard.TargetName="translate" Storyboard.TargetProperty="X" Duration="0:0:25" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</StackPanel.Triggers>
<ItemsPresenter />
</StackPanel>
</Border>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Background="CadetBlue" Width="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="Auto" ClipToBounds="True" Margin="3">
<TextBlock VerticalAlignment="Center" Foreground="Black" Text="//" Margin="0,0,8,0" ClipToBounds="True" />
<TextBlock VerticalAlignment="Center" Foreground="LightYellow" Text="{Binding Path=InnerText}" Margin="0,0,8,0" ClipToBounds="True" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Control.Margin" Value="5" />
<Setter Property="Control.VerticalAlignment" Value="Stretch" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</Grid>
The animation is working, but is cutting off the third headline. Right now it shows about 3 of the 6 headlines. Why aren't all the headlines being rendered?
Something like this should work:
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Border BorderBrush="CadetBlue" BorderThickness="2" Height="Auto"
HorizontalAlignment="Stretch" VerticalAlignment="Center"
ClipToBounds="True">
<ItemsPresenter />
</Border>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel.RenderTransform>
<TranslateTransform />
</StackPanel.RenderTransform>
<StackPanel.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.X"
From="1000" To="-1000" Duration="0:0:25" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</StackPanel.Triggers>
</StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
Related
I am trying to work on this WPF design and not having any luck
This is the xaml
<UserControl x:Class="namespace.myuserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
mc:Ignorable="d"
Loaded="UserControl_Loaded"
Focusable="True"
d:DesignHeight="10000" d:DesignWidth="1049">
<UserControl.Resources>
<CollectionViewSource x:Key="DocumentGroup" Source="{Binding docs}">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="type.Name"/>
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
<DataTemplate x:Key="groupingHeaderTemplate">
<Label VerticalAlignment="Center" Content="{Binding}" FontWeight="Bold" Background="AliceBlue"></Label>
</DataTemplate>
</UserControl.Resources>
<Grid HorizontalAlignment="Left" VerticalAlignment="Stretch" Focusable="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500" ></ColumnDefinition>
<ColumnDefinition Width="6"></ColumnDefinition>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="1" HorizontalAlignment="Center" VerticalAlignment="Stretch"
BorderBrush="DarkSlateGray" BorderThickness="1" Width="6" ShowsPreview="True" >
<GridSplitter.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF808385" Offset="0"/>
<GradientStop Color="#FFECF1F7" Offset="1"/>
</LinearGradientBrush>
</GridSplitter.Background>
</GridSplitter>
<ScrollViewer >
<ListBox Grid.Column ="0" ScrollViewer.VerticalScrollBarVisibility="Visible" Name="lstCustomList" ItemsSource="{Binding Source={StaticResource DocumentGroup}}"
SelectionChanged="ShowDocument" >
<ListBox.GroupStyle>
<GroupStyle HeaderTemplate= "{StaticResource groupingHeaderTemplate}" />
</ListBox.GroupStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
<Label Name="clLabel" Height="10000" Content="{Binding docResult, UpdateSourceTrigger=PropertyChanged}" Foreground="Red" Padding="5" Grid.ColumnSpan="2" Margin="0,0,7,0">
<Label.Style>
<Style TargetType="Label">
<Setter Property="Visibility" Value="Collapsed"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding docs.Count}" Value="0">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
<ScrollViewer Grid.Column="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid HorizontalAlignment="Left" VerticalAlignment="Stretch" Focusable="True">
<Grid.RowDefinitions>
<RowDefinition Height="50" ></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Width="300" Height="100">Launch</Button>
<wpf:WebView2 Grid.Row="1" Name="View2" />
</Grid>
</ScrollViewer>
</Grid>
The button is not visible because you set row height to 50 but also button height to 100. I would set row height to Auto in this case.
White space on the right side in the second column is due to you've set main grid HorizontalAlignment to Left. Just remove it.
WebView2 doesn't fill the space because the parent grid has HorizontalAlignment set to Left.
Here is updated xaml (main grid only)
...
<Grid VerticalAlignment="Stretch" Focusable="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500" ></ColumnDefinition>
<ColumnDefinition Width="6"></ColumnDefinition>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="1" HorizontalAlignment="Center" VerticalAlignment="Stretch"
BorderBrush="DarkSlateGray" BorderThickness="1" Width="6" ShowsPreview="True" >
<GridSplitter.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF808385" Offset="0"/>
<GradientStop Color="#FFECF1F7" Offset="1"/>
</LinearGradientBrush>
</GridSplitter.Background>
</GridSplitter>
<ScrollViewer >
<ListBox Grid.Column ="0" ScrollViewer.VerticalScrollBarVisibility="Visible" Name="lstCustomList" ItemsSource="{Binding Source={StaticResource DocumentGroup}}"
SelectionChanged="ShowDocument" >
<ListBox.GroupStyle>
<GroupStyle HeaderTemplate= "{StaticResource groupingHeaderTemplate}" />
</ListBox.GroupStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
<Label Name="clLabel" Height="10000" Content="{Binding docResult, UpdateSourceTrigger=PropertyChanged}" Foreground="Red" Padding="5" Grid.ColumnSpan="2" Margin="0,0,7,0">
<Label.Style>
<Style TargetType="Label">
<Setter Property="Visibility" Value="Collapsed"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding docs.Count}" Value="0">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
<ScrollViewer Grid.Column="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid VerticalAlignment="Stretch" Focusable="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" ></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Width="300" Height="100">Launch</Button>
<wpf:WebView2 Grid.Row="1" Name="View2" />
</Grid>
</ScrollViewer>
</Grid>
I want my background image to animate opacity, but NOT the controls "overlayed" on top of it. Here's my working XAML, but currently the controls (combobox etc) also fade in and out with the image. How do i change it so the controls don't change as well?
<Window x:Class="george.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Border>
<Border.Style>
<Style TargetType="Border">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/George_mcfly.jpg" />
</Setter.Value>
</Setter>
<Setter Property="Opacity" Value="0.4" />
<Style.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0.8" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0.3" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Content="{Binding ApplicationName}" FontSize="18" Grid.ColumnSpan="2" />
<Label Content="Version:" Grid.Row="1" FontWeight="Bold" FontSize="14"/>
<Label Content="{Binding Version}" FontSize="14" Foreground="Red" Grid.Row="1" Grid.Column="1"/>
<Label Content="Current Connection:" Grid.Row="2" FontWeight="Bold"/>
<Label Content="example" Grid.Row="2" Grid.Column="1"/>
<ComboBox Grid.Row="3">
<ComboBoxItem Content="A" />
<ComboBoxItem Content="B" />
</ComboBox>
<Label Content="User Name: " Grid.Row="4" FontWeight="Bold"/>
<Label Content="sample text" Grid.Row="4" Grid.Column="1"/>
<Label Content="Active Directory Groups: " Grid.Row="5" FontWeight="Bold"/>
<ListBox Grid.Row="5" Grid.Column="1" Background="Transparent" BorderBrush="Transparent">
<ListBoxItem Content="1" />
<ListBoxItem Content="2" />
<ListBoxItem Content="3" />
<ListBoxItem Content="4" />
</ListBox>
</Grid>
</Border>
</Grid>
Just detach that parent-child relationship which is pretty simple since you already have it embedded in a Grid;
<Window x:Class="george.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Border>
<Border.Style>
<Style TargetType="Border">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/George_mcfly.jpg" />
</Setter.Value>
</Setter>
<Setter Property="Opacity" Value="0.4" />
<Style.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0.8" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0.3" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<!-- We end the Border so it's only behind the elements instead of acting as their parent -->
</Border>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Content="{Binding ApplicationName}" FontSize="18" Grid.ColumnSpan="2" />
<Label Content="Version:" Grid.Row="1" FontWeight="Bold" FontSize="14"/>
<Label Content="{Binding Version}" FontSize="14" Foreground="Red" Grid.Row="1" Grid.Column="1"/>
<Label Content="Current Connection:" Grid.Row="2" FontWeight="Bold"/>
<Label Content="example" Grid.Row="2" Grid.Column="1"/>
<ComboBox Grid.Row="3">
<ComboBoxItem Content="A" />
<ComboBoxItem Content="B" />
</ComboBox>
<Label Content="User Name: " Grid.Row="4" FontWeight="Bold"/>
<Label Content="sample text" Grid.Row="4" Grid.Column="1"/>
<Label Content="Active Directory Groups: " Grid.Row="5" FontWeight="Bold"/>
<ListBox Grid.Row="5" Grid.Column="1" Background="Transparent" BorderBrush="Transparent">
<ListBoxItem Content="1" />
<ListBoxItem Content="2" />
<ListBoxItem Content="3" />
<ListBoxItem Content="4" />
</ListBox>
</Grid>
</Grid>
Oh and +1 for the McFly, where's Marty and the doc? :)
Oh and also, you might consider attaching those events to the parent grid and targeting just the Border in the animations with TargetName or TargetObject since as you have it now, only the Border will do it.
Earlier I asked about a fade-in,scroll down animation for items control insertion ( Animate Insertions to ItemsControl ). I got the fade-in working but I'm still perplexed about the items control insertion animation. Below is somethings that "sort of" works.
<Grid>
<ScrollViewer>
<ItemsControl Name="TimelineItems"
ItemsSource="{Binding Timeline}"
Style="{StaticResource TimelineStyle}"
ItemContainerStyle="{StaticResource TweetItemStyle}">
<ItemsControl.RenderTransform>
<TransformGroup>
<TranslateTransform />
</TransformGroup>
</ItemsControl.RenderTransform>
<ItemsControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.SizeChanged">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="TimelineItems"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="0"
Value="-50" />
<EasingDoubleKeyFrame KeyTime="0:0:0.5"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ItemsControl.Triggers>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Name="MyGrid"
Background="{Binding TweetType, Converter={StaticResource tweetTypeConverter}}"
VerticalAlignment="Top"
HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Style="{StaticResource TweetImageColumnStyle}" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Rectangle Grid.Column="0"
Style="{StaticResource TweetImageStyle}">
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding ProfileImageUrl}" />
</Rectangle.Fill>
</Rectangle>
<StackPanel Grid.Column="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Style="{StaticResource TweetNameStyle}"
Text="{Binding Name}" />
<TextBlock Grid.Column="1"
Style="{StaticResource TweetTimeStyle}"
Text="{Binding TimeAgo}" />
</Grid>
<Controls:TextBlockMarkup Grid.Row="1"
Grid.Column="1"
Markup="{Binding MarkupText}"
Style="{StaticResource TweetStyle}" />
</StackPanel>
<Separator Grid.Row="2"
Grid.ColumnSpan="2"
Style="{StaticResource TweetSeparatorTop}" />
<Separator Grid.Row="3"
Grid.ColumnSpan="2"
Style="{StaticResource TweetSeparatorBottom}" />
</Grid>
<DataTemplate.Resources>
<Storyboard x:Key="ItemAnimation"
AutoReverse="False">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyGrid"
Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.8"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</DataTemplate.Resources>
<DataTemplate.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource ItemAnimation}" />
</EventTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
I say "sort of" because the list is offset by a negative offset and then animated into position. The "animation to position" looks great, but the "jump" to a negative offset spoils the affect.
In CSS, I would simply animate the height of the inserted item but I haven't puzzled out how to do this in WPF.
Thoughts?
So, I don't know all details, but I think usual way (I'm noob, lol) are:
Add FluidMove behavior to your visual collection
Insert new object with lower width and height, e.g. 1x1
Animate it to actual size via storyboard or manually DoubleAnimation
I'm using .NET 4.0 (not .NET 4.0 CP) and have run into this kinda unique issue. I created a ListBox to display bound elements, first off here is (a part) of my XAML.
<Grid Grid.Row="2" Background="#EEEEEE">
<Border Margin="6,10,10,10" BorderBrush="#666666" BorderThickness="1">
<ListBox ItemsSource="{Binding}" Name="appList" BorderThickness="0" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Margin="5" BorderThickness="3" CornerRadius="2" BorderBrush="Black" HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="ItemBorder">
<Image Width="64" Height="64" Source="{Binding Path=IconUri}" Stretch="UniformToFill" />
</Border>
<StackPanel Margin="0,5,5,5" Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Stretch">
<TextBlock FontSize="18" Text="{Binding Path=DisplayName}" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<ProgressBar Grid.Column="0" Height="24" HorizontalAlignment="Stretch" IsIndeterminate="{Binding Path=IsDiscovering}" Value="{Binding Path=PercentageDownloaded}" />
<TextBlock Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"><TextBlock x:Name="percentageDownloaded" /><TextBlock x:Name="percentageMeter">%</TextBlock></TextBlock>
</Grid>
</StackPanel>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsDiscovering}">
<DataTrigger.Value>True</DataTrigger.Value>
<Setter TargetName="percentageDownloaded" Property="Text" Value="N/A" />
<Setter TargetName="percentageMeter" Property="Visibility" Value="Collapsed" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsDiscovering}">
<DataTrigger.Value>False</DataTrigger.Value>
<Setter TargetName="percentageDownloaded" Property="Text" Value="{Binding Path=PercentageDownloaded}" />
<Setter TargetName="percentageMeter" Property="Visibility" Value="Visible" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>
</Border>
</Grid>
Sizing the window up stretches the ListBox content just fine, but when I size it down, it retains it's width and spawns vertical scrollbars.
Have you already tried to use a StackPanel as ItemsPanel?
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
So, I have a itemsControl which is placed along the bottom of my screen like a status bar.
I have my own usercontrol called "Messenger" which are added to the itemsControl.
The ItemsControl uses a wrappanel with a FlowDirection of RightToLeft so when I add my Messager usercontrol , they start at the right hand side of the screen.
<ItemsControl x:Name="iControl" HorizontalAlignment="Right" VerticalAlignment="Bottom" Height="50" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel FlowDirection="RightToLeft" IsItemsHost="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
The messenger looks like the following
<UserControl x:Class="Tester.Messenger"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
x:Name="myUserControl"
>
<UserControl.Resources>
<Geometry x:Key="X">M0,0 L1,1 M0,1 L1,0</Geometry>
<Style x:Key="XButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard Storyboard.TargetName="MouseOverRectangle" Storyboard.TargetProperty="Opacity">
<DoubleAnimation To="1" Duration="00:00:.2"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="path" Margin="2" Data="M0,0 L1,1 M0,1 L1,0" Stroke="LightBlue" Width="10" Height="10" Stretch="Fill"/>
<Rectangle x:Name="MouseOverRectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="White" Opacity="0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<Grid.RenderTransform>
<TranslateTransform x:Name="translate" Y="50"/>
</Grid.RenderTransform>
<Grid.Triggers>
<EventTrigger RoutedEvent="Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard Storyboard.TargetName="translate" Storyboard.TargetProperty="Y">
<DoubleAnimationUsingKeyFrames>
<LinearDoubleKeyFrame KeyTime="00:00:00" Value="50"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase Oscillations="1" Springiness="9" EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Grid.Triggers>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle MinWidth="100" MinHeight="50" Fill="{Binding ElementName=myUserControl,Path=Fill}" Grid.ColumnSpan="2" Grid.RowSpan="2"/>
<Button x:Name="btnClose" Grid.Column="1" VerticalAlignment="Top" Style="{StaticResource XButtonStyle}" Margin="3,3" Click="btnClose_Click"/>
<TextBlock Text="{Binding ElementName=myUserControl,Path=Header, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Foreground="LightGray" FontSize="11" Margin="3,3,0,-3"/>
<TextBlock Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding ElementName=myUserControl,Path=Message, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Foreground="White" FontSize="16" Margin="3,-5"/>
</Grid>
When I add "Messenger" usercontrols to my itemsControl manually such as
essenger m = new Messenger();
m.Height = 50;
m.Width = 135;
m.Header = "Kate";
m.Message = "Download File ?";
iControl.Items.Add(m);
everything works fine as expected. But if I databind the ItemsControl itemsource property to some ObservableCollection and add items to the ObservableCollection, then the "Messenger" usercontrols appear reversed. What I mean, is that the textBlocks appear on the right and the X button is on the left. So its a mirror image. I know its probably got something to do with the wrappanel, But I can't figure it out. I hope this makes sense
I have the same problem in that the images in my user control are reversed. My simplified code
<UserControl x:Class="MyApp.Wpf.MainModule.Controls.ButtonImages"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ViewModels="clr-namespace:TheAA.Road.Dispatch.Eva.App.Wpf.MainModule.ViewModels"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
>
<UserControl.Resources>
<ResourceDictionary>
<DataTemplate x:Key="ButtonImageTemplate" DataType="{x:Type ViewModels:ButtonImageViewModel}">
<Image Source="{Binding ButtonProperty.ImageUri}" />
</DataTemplate>
</ResourceDictionary>
</UserControl.Resources>
<WrapPanel Margin="0" Orientation="Horizontal" HorizontalAlignment="Right" FlowDirection="RightToLeft" >
<ItemsControl ItemsSource="{Binding}" ItemTemplate="{StaticResource ButtonImageTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</WrapPanel>
</UserControl>