I've got a bit of a problem with my images in a WPF Vb.net based window.
If the image control is not directly in the centre of the window with a margin of 0, it will not show at runtime.
Here is the XAML code for both images:
<Image x:Name="loaderlogo" Height="55" Margin="1825,985,40,40" Width="55" Stretch="Fill"/>
<Image x:Name="tips" Height="128" Margin="0,732,0,220" Width="1920" Stretch="Fill" Opacity="0.9"/>
Both are contained inside a grid with one row and one column (the default grid that is there when you create a new window).
These images will not appear if this code is run however if i make the margins
Margin="0"
They will appear just fine, but in the very center of the control
How can i make it so that the controls still appear if the margins are not zero (if i move the images' location anywhere but the center of the form?
The code i use to fetch the image files is:
UseLayoutRounding = True
Dim exepath As String = System.AppDomain.CurrentDomain.BaseDirectory
loaderlogo.Source = New BitmapImage(New Uri(exepath & "loaderlogo.png", UriKind.Absolute))
tips.Source = New BitmapImage(New Uri(exepath & "tips.png", UriKind.Absolute))
The images work perfectly fine if dead center so I believe the problem is with the XAML but I am not sure where. I have changed the horizontal/vertical alignment but the images still appear in the center as long as the margin is 0.
EDIT: Below are the positions where I would like the controls to be, the bottom left is the 'loaderlogo' and the band across the window is the 'tips' control.
tips band position
loaderlogo position
EDIT 2: Below is the entire XAML code for the window:
<Window x:Class="loadingwindow" UseLayoutRounding="True"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:applicationname"
mc:Ignorable="d"
Title="loadingwindow" Height="1080" Width="1920" AllowsTransparency="True" WindowStyle="None" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowState="Maximized" Loaded="Window_Loaded">
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="00:00:01" Storyboard.TargetProperty="Opacity" From="0" To="1" Completed="DoubleAnimation_Completed"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
<Grid>
<Image x:Name="loaderlogo" Height="55" Margin="1825,985,40,40" Width="55" Stretch="Fill"/>
<Image x:Name="tips" Height="128" Margin="0,732,0,220" Width="1920" Stretch="Fill" Opacity="0.9"/>
</Grid>
Large margins are the worst way to position elements. The better approach is to use correct layout panel and correct alignments for elements. Small margin is fine to add some space between elements.
Grid panel is usually used with many RowDefinitions and ColumnDefinitions. Elements are placed in different rows and columns, and resulting layout is adaptive to size changes
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image x:Name="tips" Grid.Row="1" Height="128" Width="1920" Stretch="Fill" Opacity="0.9"/>
<Image x:Name="loaderlogo" Grid.Row="2" Height="55" Width="55" Margin="10"
HorizontalAlignment="Right" Stretch="Fill"/>
</Grid>
Related
I have created a WPF application that generate tiles in the second row of grid. What i'm trying to achieve is to keep rendering tiles in the second row without showing the vertical scroll bar, until unless the height of WPF application crosses the resolution of user screen.
<Window x:Class="ABC.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ABC Installation" MinWidth="620" SizeToContent="WidthAndHeight" AllowsTransparency="True" WindowStyle="None" Loaded="MainWindow_loaded" MinHeight="600" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="56" />
<RowDefinition Height="Auto" ScrollViewer.IsDeferredScrollingEnabled="True" />
<RowDefinition Height="94"/>
</Grid.RowDefinitions>
</Grid>
<ScrollViewer Name="productsOuterScroll" Grid.Row="2" HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.RowSpan="1" >
<StackPanel x:Name="FormStackPanel">
</StackPanel>
</ScrollViewer>
This code renders all the tiles exceeding the user screen window height without a vertical scroll bar.
Any idea how to do this? Any help would be appreciated.
If you want the content to scroll, remove the Height from the RowDefinition of the row that you are adding content to, and put the content inside the ScrollViewer.
Your window might be sizing correctly to the vertical resolution of the screen, but if it's displayed in the center of the screen, it will exceed the height. You can set the startup location to top of the screen with:
WindowStartupLocation="Manual" Top="0"
If the window height is too high, you might want to set maximum height for your window.
I figured out the mistake. Only two things needed to be done.
remove the height attribute from row definition so it should look like this
<Window x:Class="ABC.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ABC Installation" MinWidth="620" SizeToContent="WidthAndHeight" AllowsTransparency="True" WindowStyle="None" Loaded="MainWindow_loaded" MinHeight="600" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="56" />
<RowDefinition ScrollViewer.IsDeferredScrollingEnabled="True" />
<RowDefinition Height="94"/>
</Grid.RowDefinitions>
<ScrollViewer Name="productsOuterScroll" Grid.Row="2" HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.RowSpan="1" >
<StackPanel x:Name="FormStackPanel">
</StackPanel>
</ScrollViewer>
</Grid>
Setting the max Height dynamically according to the users primary screen height in .cs file
double userheightscreen = System.Windows.SystemParameters.PrimaryScreenHeight;
this.MaxHeight = userheightscreen - 100;
PS: "-100" is just to leave some space on top and bottom of the screen.
I'm trying to make a windows phone app so far so good, except one really annoying issue I'm having, i've been researching this for days and tried everything I can think of.
My layout is this: I have
1 main parent grid, 3 children grids 1 left 1 middle 1 right,
the left grid has a left margin of -480 so its not visible on the
screen,
the right margin has a right margin of -370 so its not visible on the
screen,
I'm using grid.projection so when I button is pressed the left
grid slides in
I used this guide http://depblog.weblogs.us/2013/07/22/facebook-like-settings-pane-windows-phone/
there is a listview in both the middle grid and the left grid, the middle listview scrolls the left one does not. if I remove only the -480 margin from the left grid the left listview will scroll.
so my problem is as soon as the listview is off the screen it stops scrolling even when called back to view
please help,
thanks
this is a drawing of the grids I am describing
http://i.imgur.com/FzPDC6r.jpg
UPDATE**
if I make the margin of the left grid to 360 so it is over lapping the center grid the list scrolls when the view is on the center grid, but when I switch the view to the left grid it stops scrolling
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid x:Name="MenuGrid" Grid.Column="0">
<Canvas x:Name="MainCanvas">
<Canvas.Resources>
<Storyboard x:Name="OpenAnimation">
<DoubleAnimation Duration="0:0:0.5" To="300"
Storyboard.TargetProperty="(Canvas.Left)"
Storyboard.TargetName="canvas"/>
</Storyboard>
<Storyboard x:Name="CloseAnimation">
<DoubleAnimation Duration="0:0:0.4" To="0"
Storyboard.TargetProperty="(Canvas.Left)"
Storyboard.TargetName="canvas"/>
</Storyboard>
</Canvas.Resources>
<Canvas x:Name="canvas">
<Grid Background="White"
Margin="0 0 0 30"
Height="800"
Canvas.Left="-300">
<ListView x:Name="TestListView"
Visibility="Visible"
SelectionMode="Single"
ItemTemplate="{StaticResource HomeListViewTemplate}"
ItemsSource="{Binding}"/>
</Grid>
</Canvas>
</Canvas>
</Grid>
</Grid>
Can you try this. The ListView normally when it is main screen it takes the height of its parent control like grid. But when its out of view it doesn't have a definite height. Controls like ScrollViewer,Listview will not scroll unless they have fixed height. So try to set height in XAML or in code.
I am trying to create a user control similar to a stock ticker. It will slowly scroll the items to the left. So far I am unable to get something going because:
I am new to WPF/XAML and everywhere I search seems to apply to
silvelight
I am using an ItemTemplate within a ItemsControl, and cant find any
examples showing how to add a storyboard for a item within an item template.
here is my XAML:
<UserControl x:Class="WpfApplication.Ctrls.MessageTicker"
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"
xmlns:ctrls="clr-namespace:WpfApplication.Ctrls"
d:DesignHeight="300" d:DesignWidth="300">
<Grid Background="Honeydew">
<ItemsControl ItemsSource="{Binding}" Name="_items">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="_panel">
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(Grid.RenderTransform).(TranslateTransform.X)"
Storyboard.TargetName="_panel"
From="0"
To="360"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=Word}" Grid.Column="0" Margin="0" FontWeight="Normal" FontFamily="Segoe UI Semibold"/>
<TextBlock Text="{Binding Path=Percent}" Grid.Column="1" Margin="5,0,3,0" FontFamily="Segoe UI Mono" Foreground="Blue"/>
<Polygon Points="0,10 5,0 10,10" Stroke="Black" Fill="Green" Grid.Column="2" Margin="0,3,10,0"/>
<Polygon Points="5,10 10,0 0,0" Stroke="Black" Fill="Red" Grid.Column="2" Visibility="Collapsed"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</UserControl>
From what I have read, I should be putting the storyboard within the template. When I add a new item to the ItemsControl, nothing happens. I need to have it start at the end of the ItemsControl and scroll to the right all the way to the beginning of the ItemsControl.
Ok so you're close, but you're missing some key things that might explain why it's not firing as you'd expect.
So your first issue lies with how you're using _panel. We'll want to actually move that to an RenderTransform on this Grid that's acting as your parent.
So instead of;
<Grid x:Name="_panel">
We'll say;
<Grid>
<Grid.RenderTransform>
<TranslateTransform x:Name="_panel">
</Grid.RenderTransform>
...
Because your TargetProperty setting in your storyboard isn't going to magically append that Transform on demand like it looks you're thinking it might (at least I've never seen it done that way I don't think).
So we have that, now let's go talk to that Transform via your Storyboard and have it talk to an actual property of your Transform thusly;
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="X"
Storyboard.TargetName="_panel">
<SplineDoubleKeyFrame KeyTime="0:0:0" Value="360" />
</DoubleAnimation>
</Storyboard>
So what we're doing is basically saying "HEY _panel, guess what? You get to animate, and before you start I want you to know you're moving 360 across your X axis"
We could add a keytime here to make this happen over more keyframes to allow it to fill in the blanks of an actual animation sequence (your ticker anime, hint hint) but for now, we're just telling that bugger to move.
Other than that, you should work. Hope this helps, cheers.
Oh and PS, you'd be surprised how much XAML can work between WPF/SL/WP, etc. etc. if you just know the fundamentals. Best of luck!
I have a ScrollViewer that contains a StackedPanel with rectangles laid out horizontally. I want to be able to scroll horizontally, but this isn't happening for me. Here is my XAML:
<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="BlastSwing.GroupedItemsPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BlastSwing"
xmlns:data="using:BlastSwing.Data"
xmlns:common="using:BlastSwing.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<!--
Collection of grouped items displayed by this page, bound to a subset
of the complete item list because items in groups cannot be virtualized
-->
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding Groups}"
IsSourceGrouped="true"
ItemsPath="TopItems"
d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>
</Page.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<TextBlock x:Name="pageTitle" Text="Blast Swing" Style="{StaticResource PageHeaderTextStyle}" Margin="40,0,-10,53"/>
<ScrollViewer HorizontalAlignment="Left" Height="628" Grid.Row="1" VerticalAlignment="Top" Width="1366" RenderTransformOrigin="0.476999998092651,0.998000025749207" VerticalScrollMode="Disabled" Margin="-22,0,0,0" HorizontalScrollMode="Auto">
<StackPanel Height="568" Width="1313" RenderTransformOrigin="-0.0179999992251396,0.512000024318695" Orientation="Horizontal">
<Rectangle Fill="#FF974B55" Height="568" Stroke="Black" VerticalAlignment="Top" Width="371"/>
<Rectangle Fill="#FF17179C" Height="568" Stroke="Black" VerticalAlignment="Top" Width="371"/>
<Rectangle Fill="#FF8D2B80" Height="568" Stroke="Black" VerticalAlignment="Top" Width="371"/>
<Rectangle Fill="#FF301D2F" Height="568" Stroke="Black" VerticalAlignment="Top" Width="371"/>
<Rectangle Fill="#FFF4F4F5" Height="568" Stroke="Black" VerticalAlignment="Top" Width="371"/>
</StackPanel>
</ScrollViewer>
<!-- Back button and page title -->
<!-- Horizontal scrolling grid used in most view states -->
<!-- Vertical scrolling list only used when snapped -->
<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's view state -->
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
<VisualState x:Name="FullScreenPortrait"/>
<!--
The back button and title have different styles when snapped, and the list representation is substituted
for the grid displayed in all other view states
-->
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</common:LayoutAwarePage>
You are setting Scrollviewer's Width="1366" which is more than your child stackpanel Width="1313".
If you want to see the horizontal scrollbar then you might want to set the size of ScrollViewer less than 1313 and it should be able to display the horizontal scrollbar as it is not able to display the content fully.
Set the HorizontalScrollBarVisibility property on the ScrollViewer to Visible or Auto.
You are setting the Width of your StackPanel manually and it is less than the total of its children.
Hi I am developing an animation in which flip animation is required as shown in http://www.avatar-app.com/dev/2012/01/24/ios-flip-transform/ (Similar to weatherflow app in wp7). Now I am successful in achieving this by making use of two border one above the other and animating one border using planeprojection. And here is my code
<Grid x:Name="ContentPanel" Background="Wheat" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.Resources>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation Storyboard.TargetName="planeProjection" Storyboard.TargetProperty="RotationX" From="0" To="90" Duration="0:0:5" />
</Storyboard>
</Grid.Resources>
<Border Background="AliceBlue" Grid.Row="0" ManipulationStarted="Border_ManipulationStarted">
<Border .Projection>
<PlaneProjection x:Name="planeProjection" CenterOfRotationY="1"/>
</Border .Projection>
</Border>
<Border Background="Aqua" Grid.Row="1">
</Border>
</Grid>
The problem is, here I am using two controls(Border), but I want to use animation on only one control i.e dividing the animation so that it applies to half part of the control(only one border)?
Guys help me.