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>
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
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.
I would like to change the background of my grid to white when you hover over or select it. I'd also like to change the color of the text inside at the same time to black. This is specific to one page only, so it would need to be applied with an XKey or something as a guess. The grid starts with a transparent background, also.
I'm really struggling to find the direction for this. Please let me know if you have any ideas or links!
Here's my code:
<GridView.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top" HorizontalAlignment="Left" Width="335" Height="152">
<StackPanel Orientation="Horizontal" Margin="2,2,2,2" VerticalAlignment="Top" HorizontalAlignment="Left">
<StackPanel Margin="13,0,13,0" Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left">
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<TextBlock Style="{StaticResource SmallText}" Text="{Binding Town}" />
<TextBlock Style="{StaticResource SmallText}" Text=", "/>
<TextBlock Style="{StaticResource SmallText}" Text="{Binding State}"/>
<TextBlock Style="{StaticResource SmallText}" Text=", "/>
<TextBlock Style="{StaticResource SmallText}" Text="{Binding Postcode}"/>
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
Thanks for any help.
It seems like you would probably want to modify your GridView's ItemContainerStyle and change its background and visual states to match your requirements. Check my answer to an earlier question related to restyling items here to learn how to extract and modify these styles and templates.
Hi I am trying to get my UI have scrolling in partial page having a list. Here's my code -
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,0,14,10">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBox x:Name="searchTerm" Text="potato" Width="379" />
<Button x:Name="btnSearch" Content="Go" Click="btnSearch_Click" />
</StackPanel>
<TextBlock x:Name="noResultsTxt" Visibility="Collapsed" Margin="10, 30, 0, 0" Text="No results found! try different search term" Style="{StaticResource PhoneTextNormalStyle}" />
<ScrollViewer Height="520" Width="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel>
<ListBox x:Name="itemlist" SelectionChanged="itemlist_SelectionChanged" Margin="0,10,0,0" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10" >
<TextBlock Text="{Binding Title}" FontSize="35" FontWeight="Normal"/>
<TextBlock Text="{Binding CommaCategories}" FontSize="20" FontWeight="Light" FontStyle="Italic"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
Doesnt seem to be scrolling at the List area. i seem to have figured out that the issue is with Scrollviewer not able to interact where ListBox exists. I verified that the scrolling is happening perfectly fine by setting IsHitTestVisible property of ListBox to be false.
Can someone help me out!
Answering my own question! Just as AMR commented it, I figured out that I don't need the scroll viewer, I just set the height of ListBox and scrolling worked fine! :)
On why external scrollviewer wont work with Listbox - https://stackoverflow.com/a/1294786/729032
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