We Keep Coding

WPF C#: Increase MainWindow width dynamically on page load

I'm trying to create an animation by using for loop when I load into page by increasing it's width and position. My problem is that Application.Current.MainWindow.Width in the Page_Loaded for loop doesn't work. While it works perfectly when leaving the page. My Code:
private void Page_Loaded(object sender, RoutedEventArgs e)
{
for (double i = 0; i < 50; i++)
{
Application.Current.MainWindow.Left = Application.Current.MainWindow.Left - 2;
Application.Current.MainWindow.Width = Application.Current.MainWindow.Width + 4;
}
}
private void Home_Click(object sender, RoutedEventArgs e)
{
NavigationService.GoBack();
for (double i = 0; i < 50; i++)
{
Application.Current.MainWindow.Left = Application.Current.MainWindow.Left + 2;
Application.Current.MainWindow.Width = Application.Current.MainWindow.Width - 4;
}
}
When I go to the intended page, my window just moves to the left but the width doesn't increase until the page is completely loaded and it just jumps to the final width rather than animate that. When I leave the page, both my window and width are being changed together.
Is there some limitation when setting the width under Page_Loaded? If so, how can I get over this?
XAML Settings
mc:Ignorable="d"
Loaded="Page_Loaded"
Title="DatabaseViewer">
<Grid >
<TextBlock Height="75" Margin="65,20,65,0" Text="Solder Paste Database" TextAlignment="Center" FontSize="30" VerticalAlignment="Top" />
<Button Margin="0,17,30,0" Width="50" Height="50" FontSize="20" HorizontalAlignment="Right" VerticalAlignment="Top" BorderThickness="0" Click="Export_Click"
Style="{DynamicResource SquareButtonStyle}" ToolTip="Export to Excel">
<StackPanel>
<Rectangle Width="40" Height="40" HorizontalAlignment="Center" VerticalAlignment="Center" Fill="Green">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Uniform" Visual="{StaticResource appbar_office_excel}" />
</Rectangle.OpacityMask>
</Rectangle>
</StackPanel>
</Button>
<DataGrid Name="dbGrid" Width="750" Height="340" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,0,0,20"
HorizontalContentAlignment="Center" IsReadOnly="True" PreviewKeyDown="dbGrid_KeyDown" GridLinesVisibility="All"
BorderBrush="Black" BorderThickness="1" SelectionChanged="dbGrid_SelectionChanged" >
</DataGrid>
<Grid HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,70,25,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="115"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Label FontSize="14" FontWeight="Bold" Grid.Column="0" Grid.Row="0" Content="Selected Count: " HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<Label FontSize="14" Grid.Column="1" Grid.Row="0" Content="0" HorizontalAlignment="Left" VerticalAlignment="Bottom" x:Name="selectedCount" />
</Grid>
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Margin="25,70,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="26" />
</Grid.RowDefinitions>
<TextBox Width="150" FontSize="14" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Right" x:Name="TB" ToolTip="Column Name = Value [& Column Name = Value]"/>
<Button Margin="10,0,0,0" Padding="0,0,0,0" FontSize="14" Width="80" Content="Filter" Grid.Column="1" Grid.Row="0" VerticalContentAlignment="Center"
HorizontalAlignment="Left" VerticalAlignment="Bottom" Click="filter_click" />
<Label Grid.Column="2" x:Name="filterLabel" Content="Invalid Search" Foreground="Red" FontWeight="Bold"/>
</Grid>
<Button Margin="20,27,0,0" Width="30" Height="30" FontSize="18" HorizontalAlignment="Left" Click="Home_Click" VerticalAlignment="Top" BorderThickness="0" UseLayoutRounding="True" BorderBrush="White"
Style="{DynamicResource MetroCircleButtonStyle}" >
<Rectangle Width="30" Height="30"
Fill="#41b1ff">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Uniform" Visual="{DynamicResource appbar_arrow_left}" />
</Rectangle.OpacityMask>
</Rectangle>
</Button>
</Grid>

Using explicit code to change dimensions in a loop will most likely result in batching as you have seen. Not to mention you are blocking the UI during all this so I am rather surprised you saw anything change during the loop.
The correct way to essentially animate is to use WPF Storyboards. Here you would define your start and end conditions, what it is you want to animate (width, Left) and how long the animation should run for and tell it to play. Storyboards then run without you needing to do anything more. You can define it in code or straight-up XAML.
Tell me more...

MickyD is right, a Storyboard is the best bet in this situation. Though I can achieve what you want through looping in the code-behind, the result is often buggy as you have seen. In your situation for example you would want to make a DoubleAnimation for expansion in your Windows resources.
XAML
<Window.Resources>
<Storyboard x:Key="sb2">
<DoubleAnimation Storyboard.TargetName="myWindowName" Storyboard.TargetProperty="Width" From="500" To="1200" Duration="0:0:3" AutoReverse="False"/>
<DoubleAnimation Storyboard.TargetName="myWindowName" Storyboard.TargetProperty="Left" From="500" To="200" Duration="0:0:3" AutoReverse="False"/>
</Storyboard>
</Window.Resources>
Then in your Window (or Controls) Loaded event
private void myWindowName_Loaded(object sender, RoutedEventArgs e)
{
//Reference System.Windows.Media.Animation;
Storyboard storyBoardIn = (Storyboard)TryFindResource("sb2");
storyBoardIn.Begin();
}
You will obviously need to change your storyboard params in XAML to acheive the exact thing you want. This solution is less code and more reliable in WPF. Best of luck!

Windows Phone Universal App image zoom

I'm trying to make my scrollviewer zoom work. Without ZoomMaxFactor and ZoomMinFactor it is working great, but no limits for zoom.
So i added the properties ZoomMaxMinFactor and my image are resizing without any interaction, i already looked for an answer but got nothing.
My XAML:
<PivotItem Header="item 1" >
<StackPanel x:Name="MyPanel" Width="360" Height="460">
<ScrollViewer Width="360" Height="460" ZoomMode="Enabled"
VerticalScrollBarVisibility="Visible"
HorizontalScrollBarVisibility="Visible"
MaxZoomFactor="0.5" MinZoomFactor="0.5">
<Image x:Name="MyCoolImg"/>
</ScrollViewer>
</StackPanel>
</PivotItem>
And code behind:
protected async override void OnNavigatedTo(NavigationEventArgs e)
{
MyCoolImg.Source = (BitmapImage)e.Parameter;
}
Thanks for your time =)

I got it,
New XAML:
<PivotItem Header="item1" >
<Grid Grid.Row="1">
<ScrollViewer Width="360" Height="470" HorizontalAlignment="Left" VerticalAlignment="Top" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" ZoomMode="Enabled" MinZoomFactor="0.9" MaxZoomFactor="2.8">
<StackPanel>
<Image Width="360" Height="470" x:Name="myCoolImg" Stretch="Uniform" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</StackPanel>
</ScrollViewer>
</Grid>
</PivotItem>
Thanks for the help Kennyzx!

How to retrieve an element from ItemsControl c# and Xaml?

I am creating a simple game for windows store using c# and xaml.
I want to change the colour of a rectangle when clicked.
I tried different method of conversion from sender object but I was unable to fix the bug. Please help me out. I have "onTapped" event for ItemsControl.
Xaml File :
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ItemsControl Grid.Row="1" x:Name="rectangleItems" Tapped="RectTapped">
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid x:Name="myWrapGrid" Height="400"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- The sequence children appear depends on their order in
the panel's children, not necessarily on where they render
on the screen. Be sure to arrange your child elements in
the order you want them to transition into view. -->
<ItemsControl.Items >
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10" />
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
</ItemsControl.Items>
</ItemsControl>
</Grid>
This is the code for ItemsControl event.
private void RectTapped(object sender, TappedRoutedEventArgs e)
{
SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color = Color.FromArgb(255, 0, 255, 0);
Rectangle uiElement = (Rectangle)rectangleItems.ContainerFromIndex(1);
Rectangle rc = (Rectangle)uiElement;
rc.Fill = mySolidColorBrush;
}
In this case I have manually specified the element of index 1 but I would like to change the colour of the rectangle that was clicked.
Thanks.

You should bind event to Rectangles, not the ItemControl, and then use sender object of the event as Rectangle to change it's properties:
private void RectEvent(object sender,EventArgs args)
{
var rectangle = sender as Rectangle;
//rest of your code
}
In order to bind event to your rectangles you can iterate thought the "rectangleItems" collection that you have in your code.
If binding such event is not an option, then you can use GetPosition method from TappedRoutedEventArgs (see documentation here) and then search for your rectangle by this value.

Dynamically Create Draggable UserControl in Win8 Metro App

At the minute I have a view which populates a ListView with tiles bound to a list of users. OnClick of any of these Tiles(buttons) I need to dynamically create a small draggable window consisting of a StackPanel containing an ScrollViewer&ItemsControl, Textbox and Button. This will then have to be bound to an ObservableCollection based on which user Tile was clicked.
This will be used in a private chat scenario.
I have already implemented a group chat bound to an ObservableCollection but this is created on navigation to the page.
I have started by adding the same set of controls to a dataTemplate to Resources.xaml but am quite lost as to where to go next.
<DataTemplate x:Key="PrivateChatTemplate">
<StackPanel Width="267" Height="300" >
<ScrollViewer x:Name="PrivateScrollViewer" Grid.ColumnSpan="2" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" >
<ItemsControl Name="PrivateItemsControl" Foreground="Black" />
</ScrollViewer>
<TextBox x:Name="PrivateTextBox" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Width="201" Height="60" BorderThickness="1" BorderBrush="Black"/>
<Button x:Name="PrivateSendButton" Content="Send" HorizontalAlignment="Left" Height="58" Margin="65,2,0,0" VerticalAlignment="Top" Width="66" Click="PrivateSendButton_Click" Background="Black"/>
</StackPanel>
</DataTemplate>
Thanks for any help.

Funny you mentioned a ScrollViewer since that gave me an idea for using a ScrollViewer to position a foreground window-like control in front of other content and it's fairly simple.
Inside your page - put a ScrollViewer that extends to the full size of the app window (by setting both VerticalAlignment and HorizontalAlignment to Stretch), that has a Panel like a Canvas or Grid inside of it and place the window/UserControl inside of it - like the Rectangle in the code below. Make sure the ScrollViewer can scroll both ways by setting the -ScrollMode/-ScrollBarVisibility values and the size of the panel to be larger than the ScrollViewer's ViewportWidth and ViewportHeight. You should handle SizeChanged event on the ScrollViewer and the window inside of it and set the panel's Width and Height to something like
panel.Width = scrollViewer.ViewportWidth * 2 - window.ActualWidth;
panel.Height = scrollViewer.ViewportHeight * 2 - window.ActualWidth;
Now everything should become scrollable by touch. The remaining problem is handling mouse input which you can do based on Pointer- events on the window.
XAML
<Page
x:Class="DraggableWindow.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DraggableWindow"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button
Content="Button"
HorizontalAlignment="Left"
Height="99"
Margin="112,101,0,0"
VerticalAlignment="Top"
Width="119" />
<Button
Content="Button"
HorizontalAlignment="Left"
Height="147"
Margin="985,389,0,0"
VerticalAlignment="Top"
Width="262" />
<Button
Content="Button"
HorizontalAlignment="Left"
Height="147"
Margin="403,581,0,0"
VerticalAlignment="Top"
Width="262" />
<Button
Content="Button"
HorizontalAlignment="Left"
Height="147"
Margin="112,277,0,0"
VerticalAlignment="Top"
Width="262" />
<Button
Content="Button"
HorizontalAlignment="Left"
Height="147"
Margin="682,129,0,0"
VerticalAlignment="Top"
Width="262" />
<Button
Content="Button"
HorizontalAlignment="Left"
Height="147"
Margin="551,371,0,0"
VerticalAlignment="Top"
Width="262" />
<ScrollViewer
x:Name="scrollViewer"
SizeChanged="OnScrollViewerSizeChanged"
Background="{x:Null}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalScrollMode="Auto"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
IsHorizontalRailEnabled="False"
IsVerticalRailEnabled="False">
<Canvas
x:Name="panel">
<Rectangle
x:Name="window"
SizeChanged="OnWindowSizeChanged"
PointerPressed="OnWindowPointerPressed"
PointerMoved="OnWindowPointerMoved"
PointerReleased="OnWindowPointerReleased"
Fill="LightGray"
Width="200"
Height="150"/>
</Canvas>
</ScrollViewer>
</Grid>
</Page>
C#
using Windows.Devices.Input;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
namespace DraggableWindow
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private uint pointerId;
private Point lastPoint;
private void OnWindowPointerPressed(object sender, PointerRoutedEventArgs e)
{
if (e.Pointer.PointerDeviceType == PointerDeviceType.Mouse)
{
window.CapturePointer(e.Pointer);
this.pointerId = e.Pointer.PointerId;
this.lastPoint = e.GetCurrentPoint(window).Position;
}
}
private void OnWindowPointerMoved(object sender, PointerRoutedEventArgs e)
{
if (e.Pointer.IsInContact &&
e.Pointer.PointerId == pointerId)
{
var point = e.GetCurrentPoint(window).Position;
this.scrollViewer.ChangeView(
this.scrollViewer.HorizontalOffset - point.X + lastPoint.X,
this.scrollViewer.VerticalOffset - point.Y + lastPoint.Y,
null,
true);
}
}
private void OnWindowPointerReleased(object sender, PointerRoutedEventArgs e)
{
if (e.Pointer.PointerId == pointerId)
{
window.ReleasePointerCapture(e.Pointer);
}
}
private void OnScrollViewerSizeChanged(object sender, SizeChangedEventArgs e)
{
UpdateWindowingLayout();
}
private void OnWindowSizeChanged(object sender, SizeChangedEventArgs e)
{
UpdateWindowingLayout();
}
private void UpdateWindowingLayout()
{
this.panel.Width = this.scrollViewer.ViewportWidth * 2 - 0.0 * this.window.ActualWidth;
this.panel.Height = this.scrollViewer.ViewportHeight * 2 - 0.5 * this.window.ActualHeight;
Canvas.SetLeft(this.window, this.scrollViewer.ViewportWidth - 0.5 * this.window.ActualWidth);
Canvas.SetTop(this.window, this.scrollViewer.ViewportHeight - 0.5 * this.window.ActualHeight);
}
}
}
Oh and to make it all dynamic - wrap it in a UserControl to handle the events there and put that in a Popup. I'll see about wrapping all that in a reusable control when I get a chance, since I need something like that too for my visual tree debugger overlay.

#Filip Skakun Unfortunately I have to use 8.0 as opposed to 8.1, so don't have the new ChangeView method. I have attempted to make a custom UserControl but I'm not sure how to handle the SizeChanged and UpdateWindowingLayout since the windows will be created on click of a button essentially and dynamically created. I then need to bind a list of strings to the ItemsControl inside the UserControl.
`Unfortunately I have to use 8.0 as opposed to 8.1, so don't have the new ChangeView method. I have attempted to make a custom UserControl but I'm not sure how to handle the SizeChanged and UpdateWindowingLayout(to implement the dragging) since the windows will be created on click of a button essentially and dynamically created. I then need to bind a list of strings to the ItemsControl inside the UserControl. '
<UserControl
x:Class="KeyOui.View.PrivateChatWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:KeyOui.View"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="200"
d:DesignWidth="300">
<StackPanel Background="Indigo">
<ScrollViewer>
<ItemsControl Name="PrivateChatItemsControl" ItemsSource="{Binding ListOfMessages.Name}" Width="Auto" Height="150" Foreground="Black" BorderBrush="Gray" BorderThickness="2" />
</ScrollViewer>
<StackPanel VerticalAlignment="Stretch" Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBox x:Name="GroupChatTextBox" VerticalAlignment="Bottom" TextWrapping="Wrap" FontSize="14" Width="140" Height="40" Margin="5,5,5,5" BorderThickness="1" BorderBrush="Gray"/>
<Button x:Name="SendButton" Content="Send"
HorizontalAlignment="Left" Height="40"
VerticalAlignment="Top" Width="Auto"
Click="SendButton_Click" Margin="5,5,5,5"
BorderThickness="1" BorderBrush="Gray"/>
</StackPanel>
</StackPanel>

Images in List in Panorama throwing Out of memory Exception

I have a Panorama page where list of feeds are coming from previous page which have some images. So if the size of that list increases it throws out of memory exception. Also my Pivot is in template, so I am not even able to do dispose action for images. Please help. Stuck in the issue for a long.
Constants.messageDiscArray, I am setting in previous page to a Constants file. And aslo the Panorama is in a template so I am also not able to perform any function on the images for the garbage collection.
Any help would be appreciated thanks.
This is my xaml code :
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,0,0">
<controls:Panorama x:Name="FeedsPanorama" Title="Dashboard Column" ItemsSource="{Binding Constants.messageDiscArray}" >
<controls:Panorama.ItemTemplate>
<DataTemplate>
<Grid Margin="0,-300,0,0">
<Grid Margin="0,0,0,0">
<Image Height="30" HorizontalAlignment="Left" Margin="15,319,0,0" Name="image11" Stretch="Fill" VerticalAlignment="Top" Width="30" Source="/WpControlsExample;component/Images/assigns.png" />
<Image Height="30" HorizontalAlignment="Left" Margin="340,319,0,0" Name="image13" Stretch="Fill" VerticalAlignment="Top" Width="30" Source="{Binding spamURL}" />
<Image Height="30" HorizontalAlignment="Left" Margin="376,319,0,0" Name="image14" Stretch="Fill" VerticalAlignment="Top" Width="30" Source="{Binding sentimentURL}" />
</Grid>
</Grid>
</DataTemplate>
</controls:Panorama.ItemTemplate>
</controls:Panorama>
</Grid>
</Grid>
And below is my C# code
public partial class MessageDescription : PhoneApplicationPage
{
private ObservableCollection<InboxItem> msArray = new ObservableCollection<InboxItem>();
public MessageDescription()
{
InitializeComponent();
loadPanoramaFeeds();
}
private void loadPanoramaFeeds()
{
for(int i=0;i< Constants.messageDiscArray.Count;i++){
msArray.Add(Constants.messageDiscArray[i]);
}
this.FeedsPanorama.ItemsSource = msArray;
this.FeedsPanorama.DefaultItem = this.FeedsPanorama.Items[Constants.messageIndex];
}
}