I'm trying to scroll a large textblock horizontally. I tried couple of the following way. None of the works for me. Can anyone tell me how to do it?
Try 1:-
<Canvas x:Name="myCanvas" Height="590" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="700">
<ScrollViewer x:Name="sv" Canvas.Left="1" Canvas.Top="520" HorizontalScrollBarVisibility="Auto">
<TextBlock Canvas.Left="2" Canvas.Top="522" Height="62" Name="textBlock1" Text="TextBlockTextBlockTextBlockTextBlockTextBlockTextBlock111111222222" Width="590" />
</ScrollViewer>
</Canvas>
Try 2:-
<Canvas x:Name="myCanvas" Height="590" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="700">
<StackPanel Orientation="Horizontal" Canvas.Left="1" Canvas.Top="520" Height="100" Name="stackPanel1" Width="635">
<ScrollViewer x:Name="sv" Margin="1,1,1,1" HorizontalScrollBarVisibility="Auto">
<TextBlock Canvas.Left="2" Canvas.Top="522" Height="62" Name="textBlock1" Text="TextBlockTextBlockTextBlockTextBlockTextBlockTextBlock111111222222" Width="590" />
</ScrollViewer>
</StackPanel>
Try 3:-
<Grid Canvas.Left="1" Canvas.Top="500" Height="200" Name="grid1" Width="640">
<StackPanel Orientation="Horizontal" Canvas.Left="1" Canvas.Top="500" Height="100" Name="stackPanel1" Width="635">
<ScrollViewer x:Name="sv" Margin="1,1,1,1" HorizontalScrollBarVisibility="Auto">
<TextBlock Canvas.Left="2" Canvas.Top="500" Height="62" Name="textBlock1" Text="TextBlockTextBlockTextBlockTextBlockTextBlockTextBlock111111222222" Width="590" />
</ScrollViewer>
</StackPanel>
</Grid>
<Grid x:Name="LayoutRoot" Background="Transparent">
<ScrollViewer HorizontalScrollBarVisibility="Visible">
<TextBlock Width="1000" Height="500" TextWrapping="Wrap" Text="asasdgasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf" />
</ScrollViewer>
</Grid>
If I understood correctly this should solve your problem.
Related
I'm coding a simple windows phone 7.5 localization application.
I've changed the default pushpin template as :
<ControlTemplate TargetType="maps:Pushpin" x:Key="allPushpinsTemplate">
<Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" >
<Grid.RenderTransform>
<CompositeTransform Rotation="-45"/>
</Grid.RenderTransform>
<Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26"/>
<Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Red" Width="16"/>
</Grid>
</ControlTemplate>
When I click on a pushpin, I handle the event and change the template of the selected pin as :
<ControlTemplate TargetType="maps:Pushpin" x:Key="detailedPushpinTemplate">
<Grid x:Name="ContentGrid" Background="Transparent" Margin="-4,0,0,0">
<StackPanel >
<Grid Background="Black">
<StackPanel Margin="5,5,0,0">
<TextBlock Text="{Binding Adress}" Foreground="White" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ZipCode}" Foreground="White" />
<TextBlock Text="-" Foreground="White" Padding="3,0"/>
<TextBlock Text="{Binding City}" Foreground="White" />
</StackPanel>
<TextBlock Text="{Binding TelStd}" Foreground="White" />
<TextBlock Text="{Binding Email}" Foreground="White" />
<StackPanel Orientation="Horizontal">
<Button BorderBrush="Transparent" Click="Button_Click" CommandParameter="email" ClickMode="Press">
<Button.Content>
<Image Source="/Images/Icons/icon-mail.png" Width="40" Height="40" />
</Button.Content>
</Button>
<Button BorderBrush="Transparent" Click="Button_Click" CommandParameter="phone" ClickMode="Press">
<Button.Content>
<Image Source="/Images/Icons/icon-phone.png" Width="40" Height="40" />
</Button.Content>
</Button>
</StackPanel>
</StackPanel>
</Grid>
<Polygon Fill="Black" Points="0,0 29,0 0,29" Width="29" Height="29" HorizontalAlignment="Left" />
<Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left">
<Grid.RenderTransform>
<CompositeTransform Rotation="-45"/>
</Grid.RenderTransform>
<Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26" />
<Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Green" Width="16" />
</Grid>
</StackPanel>
</Grid>
</ControlTemplate>
So that I can display some info and some commands. The result works perfectly and display a black rectangle with all my custom data.
But, the other pins (default template) overlap the rectangle and appears on the top of my selected pin and hide information.
Has anyone an idea to force the selected pin template to be always on top of the other pins ?
for information the XAML of my map :
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Canvas >
<maps:Map ZoomBarVisibility="Visible" ZoomLevel="4" Center="46.8821,2.2697" Name="map1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Canvas.Top="0" Height="600" Width="460">
<maps:MapItemsControl x:Name="mapControl"/>
<maps:MapItemsControl ItemsSource="{Binding Locations}" >
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<maps:Pushpin Location="{Binding Location}" Template="{StaticResource allPushpinsTemplate}" MouseLeftButtonDown="Pushpin_MouseLeftButtonDown"/>
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
<maps:MapLayer Name="imageLayer"/>
</maps:Map>
<Button Content="some action" Height="70" HorizontalAlignment="Left" Margin="0" Name="button1" VerticalAlignment="Top" Width="170" Canvas.Left="140" />
</Canvas>
</Grid>
The only way I've been able to work around this default behaviour is to remove the original pin and then add a new one in the same position with the different template.
The newly added pin appears at the top in the Z-Order but I haven't been able to alter the Z-Order of existing pins once created.
Also remember to "reset" any pins in the selected state when the user clicks on another.
I guess this should help you: http://social.msdn.microsoft.com/Forums/en-US/wpdevelop/thread/c4055dba-3efd-4bf7-98b3-cd8e24d175ea
i have a scrollviewer with a listbox inside: i need to disable the vertical scroll by touch, how can i?
In other words, the user can't scroll with the touch (i have put buttons, but this is another story).
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" x:Name="imagesScrollview" Width="480" Height="595" Margin="0,112,0,63">
<ScrollViewer.RenderTransform>
<CompositeTransform/>
</ScrollViewer.RenderTransform>
<ListBox Name="listavideo" Height="595" Width="480">
<ListBox.ItemTemplate>
<DataTemplate>
<Button Width="470" Height="146" Background="White" BorderBrush="#346699" Click="apri_video" Name="{Binding Mylink}" Margin="5,0,5,0" Padding="5">
<Button.Content>
<StackPanel Orientation="Horizontal" Width="470">
<Image Source="{Binding Thumbnail}" Width="160" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel Orientation="vertical" Width="285" Margin="0,0,0,0" Height="146">
<StackPanel Orientation="Horizontal" Width="275" Margin="0,0,10,0">
<TextBlock Width="275" FontSize="18" Text="{Binding Title}" Foreground="#34638f" TextWrapping="Wrap" />
</StackPanel>
<StackPanel Orientation="Horizontal" Width="275" Margin="0,0,10,0">
<TextBlock Width="275" FontSize="14" Text="{Binding Description}" Foreground="#51504e" TextWrapping="Wrap" />
</StackPanel>
</StackPanel>
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
Thanks.
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" Name="listavideo" Height="595" Width="480" >
<ListBox.ItemTemplate>
...
Im currently trying to add some Style to my Hyperlinkbutton, but cannot get it to work.
After some searching, I found this Tutorial, but even after copying the whole code (and only changing the picture) it doesnt work for me. My SDK-Target is 7.5.
Here my Code:
<ScrollViewer>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<HyperlinkButton NavigateUri="/Views/PanoramaPage.xaml" Content="Panorama" Foreground="{StaticResource PhoneAccentBrush}"/>
<HyperlinkButton NavigateUri="/Views/PanoramaPage.xaml" Content="Pivot" Foreground="{StaticResource PhoneAccentBrush}"/>
<HyperlinkButton Name="hyperlinkButton1" NavigateUri="/Views/PanoramaPage.xaml" >
<Border BorderBrush="White" BorderThickness="5" Padding="10">
<StackPanel Orientation="Horizontal">
<Image Width="60" Source="/Presentation;component/Images/refresh.png" />
<TextBlock VerticalAlignment="Center" Text="Go to View.xaml"/>
</StackPanel>
</Border>
</HyperlinkButton>
</StackPanel>
</ScrollViewer>
Tutorial-Url:
http://www.imaginativeuniversal.com/blog/post/2010/07/05/Navigating-around-windows-phone-7.aspx
The default control template for the HyperlinkButton is a TextBlock, so all it can handle is text!
One way to go around this is to change the control template, like this:
<HyperlinkButton Name="hyperlinkButton1" NavigateUri="/Views/PanoramaPage.xaml">
<HyperlinkButton.Template>
<ControlTemplate TargetType="HyperlinkButton">
<Border BorderBrush="White" BorderThickness="5" Padding="10">
<StackPanel Orientation="Horizontal">
<Image Width="60" Source="/Presentation;component/Images/refresh.png" />
<TextBlock VerticalAlignment="Center" Text="Go to View.xaml"/>
</StackPanel>
</Border>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>
I have created a page where there's alot of input from the user. So the User should be able to scroll down to be able to press a Upload button. To scroll down on the page I have used a ScrollViewer outside a grid. I am able to scroll but the page keeps scrolling back after scrolling down.
Here is my code:
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanelButtom" Grid.Row="1" >
<ScrollViewer >
<Grid x:Name="ContentPanel" Background="black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="154" />
<ColumnDefinition Width="326" />
</Grid.ColumnDefinitions>
<Image Height="109" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="167" Margin="23,19,0,0" Source="{Binding Path=ImageSoruce, Mode=TwoWay}" Grid.ColumnSpan="2" />
<TextBox Height="71" HorizontalAlignment="Left" Margin="12,161,0,0" Name="nameInput" Text="{Binding Path=Name, Mode=TwoWay}" VerticalAlignment="Top" Width="430" Grid.ColumnSpan="2" />
<TextBlock Height="56" HorizontalAlignment="Left" Margin="23,134,0,0" Name="nameLabel" Text="Name" VerticalAlignment="Top" Width="130" FontSize="25" />
<TextBlock FontSize="25" Height="60" HorizontalAlignment="Left" Margin="23,238,0,0" Name="descriptionLabel" Text="Description" VerticalAlignment="Top" Width="130" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="12,265,0,0" Name="descriptionInput" Text="{Binding Path=Description, Mode=TwoWay}" VerticalAlignment="Top" Width="430" IsEnabled="True" Grid.ColumnSpan="2" />
<TextBlock FontSize="25" Height="60" HorizontalAlignment="Left" Margin="23,343,0,0" Name="locationLabel" Text="Location" VerticalAlignment="Top" Width="130" />
<TextBlock Height="46" HorizontalAlignment="Left" Margin="24,384,0,0" Name="locationInput" Text="{Binding Path=Location, Mode=TwoWay}" VerticalAlignment="Top" Width="401" Loaded="locationInput_Loaded" Grid.ColumnSpan="2" />
<toolkit:ListPicker SelectionMode="Multiple" FullModeHeader="CATEFORIES" x:Name="ListPickerCategories" CacheMode="BitmapCache" HorizontalAlignment="Left" Margin="25,492,0,0" VerticalAlignment="Top" Width="401" Grid.ColumnSpan="2" ItemsSource="{Binding Categories}" Height="78"></toolkit:ListPicker>
<TextBlock FontSize="25" Height="60" HorizontalAlignment="Left" Margin="24,436,0,0" Name="textBlock1" Text="Categories" VerticalAlignment="Top" Width="130" />
<Button Content="Upload" Height="86" HorizontalAlignment="Left" Margin="26,604,0,0" Name="UploadButton" VerticalAlignment="Top" Width="411" Click="UploadButton_Click" Grid.ColumnSpan="2" />
</Grid>
</ScrollViewer>
</Grid>
What can be the cause of this problem and how do I solve it?
Use StackPanels to put elements one below the other. Remove all your margins, height, width and other absolute positioning stuff
<Grid x:Name="ContentPanelButtom" Grid.Row="1" >
<ScrollViewer>
<StackPanel>
<!-- elements here -->
</StackPanel>
</ScrollViewer>
</Grid>
I had the same issue. but at last i solved it, i just used the Height property to do this. Please do the following steps
First create a ScrollViewer
Indide the ScrollViewer create a container(eg: Grid/StackPanel/Border etc...) and put every controlls inside it.
Set fixed Height for ScrollViewer and the Container (Note: Height of container should be greater than ScrollViewer's Height)
See the below Code
<ScrollViewer Height="500">
<Grid Name="Container" Height="700">
<TextBox/>
<TextBox/>
<TextBox/>
</Grid>
</ScrollViewer>
Now you can scroll the container Grid Even the KeyBoard shown or even focus on a TextBox.
I am trying to create listbox with images wrapped in a wrappanel. I want to show the items fit to screen. like if the items width is less than the available screen width then the items should be stretched and if the items width is greater than the available screen width then the items should jump to next row and empty space should be filled.
Code:
<ListBox x:Name="lst" Grid.Row="3" HorizontalAlignment="Left">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Width="Auto" Height="Auto" ite ItemWidth="Auto" ItemHeight="Auto"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<Border BorderThickness="2" Width="Auto" Margin="5,5,5,5" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
<Border BorderThickness="2" Margin="5,5,5,5" Width="Auto" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
<Border BorderThickness="2" Margin="5,5,5,5" Width="Auto" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
<Border BorderThickness="2" Margin="5,5,5,5" Width="Auto" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
</ListBox>
Try adding the following container style to your ListBox:
<UserControl x:Class="MyClass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Resources>
<Style x:Key="myContainerStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</UserControl.Resources>
<ListBox ItemContainerStyle="{StaticResource myContainerStyle}">
</ListBox>
</UserControl>
(Eventually you have to use PhoneApplicationPage instead of UserControl)
UPDATE: Removed HorizontalAlignment as proposed by Jared Bienz