This is my xaml code,
<Grid x:Name="ContentPanel" Margin="12,164,12,-161" Grid.RowSpan="2"/>
<ScrollViewer HorizontalAlignment="Left" VerticalAlignment="Top" Height="1192" Margin="0,171,0,-595" Grid.RowSpan="2">
<Grid Width="478" Height="1197">
//content goes here
<Image x:Name="ImageBox" Visibility="Visible" HorizontalAlignment="Left" Width="468" Margin="0,630,0,193"/>
//content goes here
</Grid>
</ScrollViewer>
</Grid>
What the problem is that, i can't see the image,even after scrolling!
only a part of my image is visible, how can i rectify this issue??
Unless i have understood the question wrong, mostly the problem might be with the line,
<Grid x:Name="ContentPanel" Margin="12,164,12,-161" Grid.RowSpan="2"/>
Change Grid.RowSpan="1".
<Grid x:Name="ContentPanel" Margin="12" Grid.RowSpan="2" Height ="700"/>
<ScrollViewer HorizontalAlignment="Left" VerticalAlignment="Top" Height="1192" Margin="0" >
//content goes here
<Image x:Name="ImageBox" Visibility="Visible" HorizontalAlignment="Left" Width="468" Margin="0,20"/>
//content goes here
</ScrollViewer>
</Grid>
Please check the following items:
Since Windows phone design has maximum height 800 so your scrollveiwer height can be thus be maximum : 800-164 = 636
Remove negative margin of content panel
Remove negative margin of ScrollViewer otherwise your design would be cut from downside.
Your code should be like this :
<Grid x:Name="ContentPanel" Margin="12,164,12,0" Grid.RowSpan="2"/>
<ScrollViewer HorizontalAlignment="Left" VerticalAlignment="Top" Height="636" Margin="0,0,0,0" Grid.RowSpan="2">
<Grid Width="478" Height="1197">
//content goes here
<Image x:Name="ImageBox" Visibility="Visible" HorizontalAlignment="Left" Width="468" Margin="0,630,0,193"/>
//content goes here
</Grid>
</ScrollViewer>
</Grid>
If your problem still exist please update the question to include the xaml code.
Related
i want to display large image in small control such that entire image can be scrolled.
for this, i have used following code but i could only succeed in achieving vertical scrolling.
what should i do for enabling both, horizontal and vertical scrolling ?
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Width="470">
<ScrollViewer x:Name="scrollViewer" Width="470" Height="270" HorizontalAlignment="Left" VerticalAlignment="Top">
<Image Name="drag" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Top"/>
</ScrollViewer>
</Grid>
if there is any other solution than using scrollviewer then please share it, or mention any changes in this code which are useful for achieving the same.
Try
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Width="470">
<ScrollViewer x:Name="scrollViewer" Width="470" Height="270" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"HorizontalAlignment="Left" VerticalAlignment="Top">
<Image Name="drag" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Top"/>
</ScrollViewer>
</Grid>
You need to set HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties to achieve desired scrolling.
Edit :
If you want to see the scroll bars always you can set HorizontalScrollBarVisibility="Visible" and VerticalScrollBarVisibility="Visible" .Otherwise("Auto") scroll bars will appear based on the content size
in my app i would like multiply section grids, these then go done the page one recantgle after another. The problem if i would like to add more sections but they go down below the app design. I have tried to add a stackpanel and stackviewer but neither work. The user should be able to scroll down and see all the sections.
Thank you in advance
The code looks somewhat like this;
<Grid Background="Teal">
<Grid HorizontalAlignment="Left" Height="163" VerticalAlignment="Top" Width="480">
</Grid>
<Grid Height="130" VerticalAlignment="Top" Margin="0,164,0,0">
</Grid>
<Grid Height="140" VerticalAlignment="Top" Margin="0,295,0,0">
</Grid>
<Grid x:Name="ContentPanel" Margin="0,435,0,129">
</Grid>
<Grid x:Name="ContentPanel2" Margin="0,435,0,129">
</Grid>
</Grid>
The user should be able to scroll down the page and see all the grids, as one grid is off the page.
You need to combine the <StackPanel> with a <ScrollViewer> to get the scrollable view, so something like:
<Grid Background="Teal">
<ScrollViewer>
<StackPanel>
<Grid HorizontalAlignment="Left" Height="163" VerticalAlignment="Top" Width="480">
...
</Grid>
<Grid Height="130" VerticalAlignment="Top">
...
</Grid>
<Grid Height="140" VerticalAlignment="Top">
...
</Grid>
<Grid x:Name="ContentPanel">
...
</Grid>
<Grid x:Name="ContentPanel2">
...
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
I have a strange issue, I tried every trick I knew to centre align the ListView placed inside a grid. No matter what, it looks like it is left aligned. The width and height of the ListView is data bound. (Width can take values 350 or 700 and height can take 100 or 200 depending on the Size settings. If size settings is compact it should be 350x100 and and if normal 700x200).
This is the xaml code
<Grid x:Name="GridPageLVPortrait" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4" Background="Beige" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,0,584.714,0" Width="781">
<ListView x:Name="PageLVPortrait" ItemsSource="{Binding}" CanReorderItems="True" AllowDrop="True" HorizontalAlignment="Center" SelectionMode="Single" IsSwipeEnabled="True" IsItemClickEnabled="True" SelectionChanged="PageLVPortraitSelectionChanged" ItemClick="PageLVPortraitItemClick" Height="{Binding TemplateHeight}" Width="{Binding TemplateWidth}" >
<ListView.ItemTemplate>
<DataTemplate>
<Canvas HorizontalAlignment="Center" Width="{Binding TemplateWidth}" Height="{Binding TemplateHeight}">
<Canvas.Background>
<ImageBrush ImageSource="{Binding PageBackground}"/>
</Canvas.Background>
<Image HorizontalAlignment="Center" Height="{Binding TemplateHeight}" Width="{Binding TemplateWidth}" Source="{Binding Page}" Stretch="None" Opacity="1" CacheMode="BitmapCache" />
<StackPanel x:Name="EditDeleteStackPanel" Width="{Binding TemplateWidth}" Height="{Binding TemplateHeight}" Opacity="0.95">
<Button x:Name="NoteDelete" HorizontalAlignment="Right" VerticalAlignment="Top" Foreground="{x:Null}" Tapped="NoteDelete_Tapped" MinWidth="50" MinHeight="50" Margin="0,0,10,0" BorderBrush="{x:Null}" >
<Button.Background>
<ImageBrush ImageSource="{Binding Delete}"/>
</Button.Background>
</Button>
<Button x:Name="NoteEdit" HorizontalAlignment="Right" VerticalAlignment="Top" FontFamily="Segoe Script" FontSize="24" BorderBrush="{x:Null}" Tapped="NoteEdit_Tapped" Foreground="{x:Null}" MinWidth="50" MinHeight="50" Margin="0,0,10,0">
<Button.Background>
<ImageBrush ImageSource="{Binding Edit}"/>
</Button.Background>
</Button>
</StackPanel>
</Canvas>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Could someone kindly help?
I've tried your code, in a whole page Grid with the normal dimension convention you provided (700x200). The listview does get center aligned if I ignore the grid's Margin="0,0,584.714,0". If you need the 584px in the right of the page, I'd say better put a grid's column there with that width.
I had found the issue. It is because the main grid is spit into 4 columns. And since this one uses columnspan, the alignment gets messed up.
I wonder if someone can help me with the FlipView control in windows 8. I have an app that uses a FlipView . Everything was working fine until a recent windows 8 update, and now the FlipView flips 'twice' in certain circumstances.
Here is some example XAML that reproduces the error:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<FlipView >
<Grid Height="762" Background="#FF29AA29">
<TextBlock HorizontalAlignment="Center" Text="1" VerticalAlignment="Center"
Foreground="Black" FontSize="96"/>
</Grid>
<Grid Height="762" Background="#FF192780">
<TextBlock HorizontalAlignment="Center" Text="2" VerticalAlignment="Center"
Foreground="Black" FontSize="96"/>
</Grid>
<Grid Height="762" Background="Green">
<TextBlock HorizontalAlignment="Center" Text="3" VerticalAlignment="Center"
Foreground="Black" FontSize="96"/>
</Grid>
<Grid Height="762" Background="Orange">
<TextBlock HorizontalAlignment="Center" Text="4" VerticalAlignment="Center"
Foreground="Black" FontSize="96"/>
</Grid>
<Grid Height="762" Background="Blue">
<TextBlock HorizontalAlignment="Center" Text="5" VerticalAlignment="Center"
Foreground="Black" FontSize="96"/>
</Grid>
<Grid Height="762" Background="Red">
<TextBlock HorizontalAlignment="Center" Text="6" VerticalAlignment="Center"
Foreground="Black" FontSize="96"/>
</Grid>
<Grid Height="762" Background="Yellow">
<TextBlock HorizontalAlignment="Center" Text="7" VerticalAlignment="Center"
Foreground="Black" FontSize="96"/>
</Grid>
</FlipView>
</Grid>
As you can see its a very simple example with numbered grids inside the FlipView.
Now, if you click on the forward or back flip buttons (slightly greyed out buttons on left and right sides) WITHOUT moving the mouse to a different location (i.e. move the mouse over the forward button and click multiple times without moving the mouse again) it will flip 1,2,4,6,7 (see numbers in my xaml).
If however you move the mouse slightly between clicks you get the correct behaviour (1,2,3,4,5,6,7).
This error exists in both local machine and emulator mode.
It doesn't happen when you use the finger drag method in the emulator to flip.
Does anyone have any ideas about how to fix this ?
It turns out the Windows 8 update I downloaded screwed the driver for my touchpad, and the issue is purely driver related - very weird though
I have a ContentControl wrapped in a ScrollViewer but for some reason I cant work out even though the content that I place within the ContentControl is bigger than the visible space the scrollbars do not get enabled. The verticalscrollbarvisibilty is set to visible.
When I view my silverlight app the vertical scrollbar is also cut off at the bottom i.e. I cant see the button that you would use for scrolling ownwards.
Can anyone shed any light on this or point me in the right direction.
there is no reason for that may be you are doing something wrong see this code may be this will help you
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Width="200" Height="200">
<Grid Width="500" Height="400">
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Left" Text="Hello"/>
<TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Right" Text="World"/>
</Grid>
</ScrollViewer>
sorry forgot to add the layout grid
<Grid x:Name="LayoutRoot" Background="White">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Width="200" Height="200">
<Grid Width="500" Height="400">
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Left" Text="Hello"/>
<TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Right" Text="World"/>
</Grid>
</ScrollViewer>
</Grid>