I have a TextBox inside a ScrollViewer, as shown below
<ScrollViewer Name="scrollViewer1" Height="480" HorizontalAlignment="Left" Margin="0,480,8,82" VerticalAlignment="Bottom" Width="480" VerticalScrollBarVisibility="Auto">
<TextBox Name="box1" TextWrapping="Wrap" FontSize="32" IsReadOnly="True" TextAlignment="Center"/>
</ScrollViewer>
I don't want VerticalAlignment="Bottom" as I want to scroll to a specific place in the TextBox and for it to stay there without automatically scrolling to the bottom again.
Thanks
Related
This is my XAML
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="10,0,0,0">
<TextBlock x:Name="PageTitle"
RelativePanel.AlignTopWithPanel="True"
Style="{StaticResource WindowTitle}">This is my page title</TextBlock>
<TextBlock x:Name="ActivityLabel"
RelativePanel.Below="PageTitle"
Style="{StaticResource CaptionTitle}">Activity</TextBlock>
<ComboBox x:Name="ActivityOptions"
RelativePanel.RightOf="ActivityLabel"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignHorizontalCenterWith="ActivityLabel"
ItemsSource="{Binding Path=SupportedActivityTypes}">
</ComboBox>
</RelativePanel>
And this is my output
What I want to achieve is that the title is on top of the page, multiple lines below the title. Each line has a caption, right to the caption is combo box, textbox and so on, but the right side should stretch to the right border of the panel.
Obviously my code does not work, the combo does not even central align with my caption text as I specified in markup. And how to make the left side of combo to touch the caption text and right side to the border of the panel?
I figured it out, I need following XAML
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="10,0,0,0">
<TextBlock x:Name="PageTitle"
Margin="0,0,0,20"
RelativePanel.AlignTopWithPanel="True"
Style="{StaticResource WindowTitle}">This is page title</TextBlock>
<TextBlock x:Name="ActivityLabel"
RelativePanel.Below="PageTitle"
Style="{StaticResource CaptionTitle}">Activity</TextBlock>
<ComboBox x:Name="ActivityOptions"
Margin="10,0,0,0"
HorizontalAlignment="Stretch"
RelativePanel.RightOf="ActivityLabel"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignVerticalCenterWith="ActivityLabel"
ItemsSource="{Binding Path=SupportedActivityTypes}">
</ComboBox>
</RelativePanel>
The combo box is on the same line of caption label ("Activity") and meanwhile the width stretches to relative panel size.
how to make the left side of combo to touch the caption text and right side to the border of the panel?
You need to set RelativePanel.RightOf="PageTitle" and RelativePanel.AlignVerticalCenterWith="PageTitle".
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="10,0,0,0">
<TextBlock x:Name="PageTitle"
RelativePanel.AlignTopWithPanel="True"
Style="{StaticResource TitleTextBlockStyle}" VerticalAlignment="Center" FontSize="35">This is my page title</TextBlock>
<TextBlock x:Name="ActivityLabel"
RelativePanel.Below="PageTitle"
Style="{StaticResource CaptionTextBlockStyle}">Activity</TextBlock>
<ComboBox x:Name="ActivityOptions"
RelativePanel.RightOf="PageTitle"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignVerticalCenterWith="PageTitle"
ItemsSource="{Binding Path=SupportedActivityTypes}">
</ComboBox>
</RelativePanel>
Im trying to have a textblock inside a scrollviewer, and if the text exceds the scrollviewer width, have it trimmed.
The text should display the "..." indicating thre is more text, so that the user can scroll to see the rest of the text.
right now i have something like this, but the text trimming inst working.
<ScrollViewer Grid.Row="1" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Hidden" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden">
<TextBlock Margin="0,5,0,0" Text="{Binding Item.Name}" FontFamily="Segoe UI Semibold" Foreground="White" FontSize="20" FontWeight="SemiBold" VerticalAlignment="Center" TextTrimming="WordEllipsis"/>
</ScrollViewer>
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
I'm new at developing apps for Windows 8, and its my first encounter with XAML.
I'm trying to build a GridView that will show a grid of 150x150 tiles. The GridView's XAML looks like this:
<GridView Grid.Row="2" Grid.Column="0"
x:Name="ClocksContainer"
VerticalAlignment="Top"
Height="190"
Margin="80,20,80,0"
HorizontalContentAlignment="Left">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Height="150" Margin="75,0,940,0" Width="150" Background="#FF971485">
<TextBlock Text="12:23pm" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="130" FontSize="32" Foreground="White"/>
<TextBlock Text="23 February, 2014" HorizontalAlignment="Left" Margin="10,48,0,0" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="-0.444,0.385" Foreground="#B2FFFFFF"/>
<TextBlock Text="29° / 20°" HorizontalAlignment="Left" Margin="102,128,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#B2FFFFFF" TextAlignment="Right" FontSize="10"/>
<TextBlock Text="Party Cloudy" HorizontalAlignment="Left" Margin="10,128,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#B2FFFFFF" FontSize="10"/>
<Border BorderBrush="{x:Null}" HorizontalAlignment="Left" Height="45" Margin="10,78,0,0" VerticalAlignment="Top" Width="130">
<TextBlock Text="Chennai, India" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Bottom" Foreground="White" Width="130" FontSize="14"/>
</Border>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.Items>
<x:String>test</x:String>
<x:String>test</x:String>
</GridView.Items>
</GridView>
However, in the output I'm finding that my grid items are stretching to the width of the grid itself!
To illustrate, here are two cropped screenshots of the rendered GridView.
The first screenshot shows how a grid item expands to the width of the GridView. (I've added the red outline myself in photoshop).
The second screenshot is of the gridview scrolled ahead to reveal teh second item. The red outline on the first item has been replicated via photoshop. The second item's background is a darker colour because it is mouse-over-ed.
My Question: How do I make the grid items not expand to the width? The intended output is this:
Remove Margin="75,0,940,0" from GridView's ItemTemplate
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>