I am trying to figure out how to make the default width of the left side wider. When I click on the tab to expand the left side it isn't wide enough to see the data in the pane.
<avalonDock:LayoutRoot.LeftSide>
<avalonDock:LayoutAnchorSide>
<avalonDock:LayoutAnchorGroup>
<avalonDock:LayoutAnchorable Title="Document Properties">
<StackPanel Width="500">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Margin="0,10,0,0">File #</Label>
<TextBox Grid.Row="0" Width="100" Height="20" Margin="0,10,0,0"/>
</Grid>
</StackPanel>
</avalonDock:LayoutAnchorable>
</avalonDock:LayoutAnchorGroup>
</avalonDock:LayoutAnchorSide>
</avalonDock:LayoutRoot.LeftSide>
Thanks for the help,
Gary
Add AutoHideWidth and FloatingWidth to your LayoutAnchorable tag:
<avalonDock:LayoutAnchorable Title="Document Properties"
AutoHideWidth="500"
FloatingWidth="500">
I used 500 pixels here, but you can set any width you like.
AutoHideWidth is the width when it pops out from its hidden state; FloatingWidth is the width when you drag it free from the side of the window.
Related
I have a page in landscape mode, set in code with the next line:
DisplayInformation.AutoRotationPreferences = DisplayOrientations.LandscapeFlipped | DisplayOrientations.Landscape;
Following is code for full screen mode:
Windows.UI.ViewManagement.ApplicationView view = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView();
view.TryEnterFullScreenMode();
In my scrollviewer, I want to include some dynamically created charts from syncfusion package. I thought this was the problem but after a while, I tried creating some rows in a grid with just textblocks so I could try the scrollviewer and it doesn't work either.
This is all my page content (except page and page.resources content) :
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Background="{StaticResource AccentBrush}" Grid.Row="0" Margin="0,0,0,10">
<TextBlock Name="Statistic_name" HorizontalAlignment="Center" FontSize="23" Text="Estadísticas"/>
</StackPanel>
<StackPanel Grid.Row="1" Margin="15,0,15,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ComboBox Grid.Column="0" Name="Combo_device" PlaceholderText="Contenedor" SelectionChanged="Combo_device_SelectionChanged" />
<ComboBox Grid.Column="1" Name="Combo_sensor" PlaceholderText="Sensor" />
<ComboBox Grid.Column="2" Name="Combo_number" PlaceholderText="Número" />
<!-- SelectionChanged="Combo_number_SelectionChanged" -->
<Button Name="Show_data" Grid.Column="3" Click="Show_data_Button_Click" Content="Cargar Datos"/>
</Grid>
</StackPanel>
<StackPanel Grid.Row="2">
<ScrollViewer Margin="20,20,20,20" Name="Scroll_container" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" >
<Grid Name="Stack_panel_scroll_statistics">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0">Hola 0</TextBlock>
<TextBlock Grid.Row="1">Hola 1</TextBlock>
<TextBlock Grid.Row="2">Hola 2</TextBlock>
<TextBlock Grid.Row="3">Hola 3</TextBlock>
<TextBlock Grid.Row="4">Hola 4</TextBlock>
<TextBlock Grid.Row="5">Hola 5</TextBlock>
<TextBlock Grid.Row="6">Hola 6</TextBlock>
<TextBlock Grid.Row="7">Hola 7</TextBlock>
<TextBlock Grid.Row="8">Hola 8</TextBlock>
<TextBlock Grid.Row="9">Hola 9</TextBlock>
<TextBlock Grid.Row="10">Hola 10</TextBlock>
<TextBlock Grid.Row="11">Hola 11</TextBlock>
<TextBlock Grid.Row="12">Hola 12</TextBlock>
<TextBlock Grid.Row="13">Hola 13</TextBlock>
<TextBlock Grid.Row="14">Hola 14</TextBlock>
<TextBlock Grid.Row="15">Hola 15</TextBlock>
<TextBlock Grid.Row="16">Hola 16</TextBlock>
<TextBlock Grid.Row="17">Hola 17</TextBlock>
</Grid>
</ScrollViewer>
</StackPanel>
</Grid>
Can somebody tell me where the error is?
I tried by modifying the code a lot and the result is always the same. I thought it was because the content was dynamically created in C# part but after trying with textblocks, it doesn't seem to be the case.
Change the <RowDefinition Height="auto"/> for Grid.Row=2 which encloses your scrollViewer to <RowDefinition Height="*"/> or specify a minimum height for your scrollviewer.
EDIT
Remove Stackpanel also and just simply use a Scrollviewer
Working Code
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="0,0,0,10">
<TextBlock Name="Statistic_name" HorizontalAlignment="Center" FontSize="23" Text="Estadísticas"/>
</StackPanel>
<StackPanel Grid.Row="1" Margin="15,0,15,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ComboBox Grid.Column="0" Name="Combo_device" PlaceholderText="Contenedor" />
<ComboBox Grid.Column="1" Name="Combo_sensor" PlaceholderText="Sensor" />
<ComboBox Grid.Column="2" Name="Combo_number" PlaceholderText="Número" />
<!-- SelectionChanged="Combo_number_SelectionChanged" -->
<Button Name="Show_data" Grid.Column="3" Content="Cargar Datos"/>
</Grid>
</StackPanel>
<ScrollViewer Grid.Row="2" Margin="20,20,20,20" Name="Scroll_container" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" >
<Grid Name="Stack_panel_scroll_statistics">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0">Hola 0</TextBlock>
<TextBlock Grid.Row="1">Hola 1</TextBlock>
<TextBlock Grid.Row="2">Hola 2</TextBlock>
<TextBlock Grid.Row="3">Hola 3</TextBlock>
<TextBlock Grid.Row="4">Hola 4</TextBlock>
<TextBlock Grid.Row="5">Hola 5</TextBlock>
<TextBlock Grid.Row="6">Hola 6</TextBlock>
<TextBlock Grid.Row="7">Hola 7</TextBlock>
<TextBlock Grid.Row="8">Hola 8</TextBlock>
<TextBlock Grid.Row="9">Hola 9</TextBlock>
<TextBlock Grid.Row="10">Hola 10</TextBlock>
<TextBlock Grid.Row="11">Hola 11</TextBlock>
<TextBlock Grid.Row="12">Hola 12</TextBlock>
<TextBlock Grid.Row="13">Hola 13</TextBlock>
<TextBlock Grid.Row="14">Hola 14</TextBlock>
<TextBlock Grid.Row="15">Hola 15</TextBlock>
<TextBlock Grid.Row="16">Hola 16</TextBlock>
<TextBlock Grid.Row="17">Hola 17</TextBlock>
</Grid>
</ScrollViewer>
</Grid>
Grid Structure
Load
When click on textbox and open keypad then title scroll up..I want to fix the title place (not scroll)
how to resove this problem?
when click on textbox keypad opened but title scroll up...
My xaml code
<Grid x:Name="grdEmergencyServices" ScrollViewer.VerticalScrollMode="Disabled" >
<Grid.Background>
<ImageBrush ImageSource="/Assets/1.png"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="50*"/>
<RowDefinition Height="500*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Background="#8C6446" Grid.Row="0" Grid.ColumnSpan="3"/>
<Grid Grid.Row="0" Background="#8C6446" Opacity="0.8">
<TextBlock Name="pageTitle" Text="Title Name" Style=" {StaticResource CommonStyle}"/>
</Grid>
</Grid>
<ProgressRing Grid.Row="1" x:Name="ProgressRingLoad" Visibility="Collapsed" Background="Transparent" IsActive="True" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center" />
<ScrollViewer Grid.Row="1" Margin="20">
<TextBox TextWrapping="Wrap" Text="TextBox" Margin="0,500,0,0"/>
</ScrollViewer>
</Grid>
<Grid x:Name="LayoutRoot" Background="Transparent">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Flick="GestureListener_Flick"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Background="Black">
<Canvas Name="ContentPanelCanavas" Background="Transparent">
<phone:WebBrowser Name="WebView"
IsScriptEnabled="True"
Grid.Row="0"
IsGeolocationEnabled="True"
ScriptNotify="webView_ScriptNotify"
NavigationFailed="webView_NavigationFailed"
Navigated="webView_Navigated"
Navigating="webView_Navigating"
VerticalAlignment="Top"
LoadCompleted="WebView_LoadCompleted"
Canvas.Top="0"
Canvas.Left="0">
</phone:WebBrowser>
<Image Name="StartLogo" Source="/Assets/StartScreen3.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
<GoogleAds:AdView Name="BannerAd"
AdUnitID="a14e0073dbc5ecb"
Format="Banner"
VerticalAlignment="Bottom"
ReceivedAd="AdView_ReceivedAd"
FailedToReceiveAd="AdView_FailedToReceiveAd">
</GoogleAds:AdView>
</Canvas>
</Grid>
</Grid>
This is my MainPage.xaml file code where I have put my WebBrowser component inside a Canvas. Now my problem is, when I test this code on Emulator WVGA 512MB it looks fine like this
But when I test it on Emulator WXGA(768x1280) WebBrowser is going out of the screen and looks like this
How can I fix it. Please help. I dont want to remove canvas view.
EDIT:
Got fixed with this. Thanks to #Vyas_27 and #KooKiz
<Grid x:Name="LayoutRoot" Background="Transparent">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Flick="GestureListener_Flick"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Background="Black">
<Canvas Name="ContentPanelCanavas"
Background="Transparent">
<GoogleAds:AdView Name="BannerAd"
AdUnitID="a14e0073dbc5ecb"
Format="Banner"
VerticalAlignment="Bottom"
ReceivedAd="AdView_ReceivedAd"
FailedToReceiveAd="AdView_FailedToReceiveAd">
</GoogleAds:AdView>
</Canvas>
<phone:WebBrowser Name="WebView"
IsScriptEnabled="True"
Grid.Row="0"
IsGeolocationEnabled="True"
ScriptNotify="webView_ScriptNotify"
NavigationFailed="webView_NavigationFailed"
Navigated="webView_Navigated"
Navigating="webView_Navigating"
VerticalAlignment="Top"
LoadCompleted="WebView_LoadCompleted"
Canvas.Top="0"
Canvas.Left="0"
Height="{Binding ActualHeight, ElementName=LayoutRoot}"
Width="{Binding ActualWidth, ElementName=LayoutRoot}">
</phone:WebBrowser>
<Image Name="StartLogo" Source="/Assets/StartScreen3.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
</Grid>
</Grid>
You can keep your canvas, but put your WebBrowser control outside of it:
<Grid x:Name="LayoutRoot" Background="Transparent">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Flick="GestureListener_Flick"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Background="Black">
<phone:WebBrowser Name="WebView"
IsScriptEnabled="True"
IsGeolocationEnabled="True"
ScriptNotify="webView_ScriptNotify"
NavigationFailed="webView_NavigationFailed"
Navigated="webView_Navigated"
Navigating="webView_Navigating"
VerticalAlignment="Top"
LoadCompleted="WebView_LoadCompleted">
</phone:WebBrowser>
<Canvas Name="ContentPanelCanavas" Background="Transparent">
<Image Name="StartLogo" Source="/Assets/StartScreen3.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
<GoogleAds:AdView Name="BannerAd"
AdUnitID="a14e0073dbc5ecb"
Format="Banner"
VerticalAlignment="Bottom"
ReceivedAd="AdView_ReceivedAd"
FailedToReceiveAd="AdView_FailedToReceiveAd">
</GoogleAds:AdView>
</Canvas>
</Grid>
</Grid>
This way, it'll be correctly sized by the Grid, and you can still place the other controls as you wish by using the canvas.
try this see if it works;
<Grid x:Name="LayoutRoot" Background="Transparent">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Flick="GestureListener_Flick"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Background="Black">
<Canvas Name="ContentPanelCanavas" Background="Transparent">
<phone:WebBrowser Name="WebView"
IsScriptEnabled="True"
Grid.Row="0"
Height="{Binding ActualHeight, ElementName=LayoutRoot}"
Width="{Binding ActualWidth, ElementName=LayoutRoot}"
IsGeolocationEnabled="True"
ScriptNotify="webView_ScriptNotify"
NavigationFailed="webView_NavigationFailed"
Navigated="webView_Navigated"
Navigating="webView_Navigating"
VerticalAlignment="Top"
LoadCompleted="WebView_LoadCompleted"
Canvas.Top="0"
Canvas.Left="0">
</phone:WebBrowser>
<Image Name="StartLogo" Source="/Assets/StartScreen3.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
<GoogleAds:AdView Name="BannerAd"
AdUnitID="a14e0073dbc5ecb"
Format="Banner"
VerticalAlignment="Bottom"
ReceivedAd="AdView_ReceivedAd"
FailedToReceiveAd="AdView_FailedToReceiveAd">
</GoogleAds:AdView>
</Canvas>
</Grid>
</Grid>
Just add;
Height="{Binding ActualHeight, ElementName=LayoutRoot}"
Width="{Binding ActualWidth, ElementName=LayoutRoot}"
to your webbrowser control.
I've got a Scrollviewer which has a StackPanel (which contain ExpanderViews)
I'm updating the ScrollViewer VerticalOffset when the ExpanderViews are expanded. However the Scrollviewer doesn't scroll up at all.
The only time the scrollviewer scrolls to a vertical offset is from within FScrollViewer_LayoutUpdated() method. (This is tied to the LayoutUpdated event of ScrollViewer)
Is there any way to update the VerticalOffset (or ScrollToVerticalOffset) from another method?
<Grid x:Name="FilterGrid" Height="696" Grid.Row="0" Background="White">
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer x:Name="FScrollViewer" toolkit:TiltEffect.SuppressTilt="True" LayoutUpdated="FScrollViewer_LayoutUpdated"
MouseMove="FScrollViewer_MouseMove" Width="{Binding ElementName=FilterGrid, Path=ActualWidth}" Height="{Binding ElementName=FilterGrid, Path=ActualHeight}" >
<StackPanel Name="StackPanel" Margin="50,0,0,0" >
<StackPanel x:Name="Header" Height="65" Orientation="Horizontal" Background="Transparent" >
<TextBlock x:Name="HeaderTextBlock" Text="Random text" Style="{StaticResource PhoneTextTitle2Style}" TextTrimming="WordEllipsis" FontWeight="SemiBold" Foreground="Black" Margin="60,5,5,5" VerticalAlignment="Center"/>
</StackPanel>
<Line Width="Auto" StrokeThickness="1.5" Stretch="Fill" Stroke="Gray" X1="2" />
</StackPanel>
</ScrollViewer>
</Grid>
I'm new to Windows phone 8 development and I am having difficulty with a panorama view.
When I create a basic 'Windows Phone Portrait Page' I have no difficulty creating grids and aligning Toolbox controls between those grids.
However, with the Panorama page, when I create grids, those grids are applied to every page in the panorama and therefore I cannot use different layouts for each page.
How would I achieve different layouts on my panorama page?
Should I be using a WindowsPhoneControl instead?
Thanks for your time.
<phone:PhoneApplicationPage
x:Class="SmarterPower.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="False">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="148*"/>
<ColumnDefinition Width="225*"/>
<ColumnDefinition Width="107*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="351*"/>
<RowDefinition Height="201*"/>
<RowDefinition Height="248*"/>
</Grid.RowDefinitions>
<!--Panorama control-->
<phone:Panorama Title="smarter power for you" Grid.RowSpan="3" Grid.ColumnSpan="3">
<phone:Panorama.Background>
<ImageBrush ImageSource="/SmarterPower;component/Assets/PanoramaBackground.png"/>
</phone:Panorama.Background>
<!--Panorama item one-->
<phone:PanoramaItem>
<!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
<phone:LongListSelector Margin="0,-38,-22,2" ItemsSource="{Binding Items}" VerticalContentAlignment="Top" VerticalAlignment="Top">
<phone:LongListSelector.ListHeaderTemplate>
<DataTemplate>
<Grid Margin="12,0,0,38">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="menu"
Style="{StaticResource PanoramaItemHeaderTextStyle}"
Grid.Row="0"/>
</Grid>
</DataTemplate>
</phone:LongListSelector.ListHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Height="50" Width="432">
<!--Replace rectangle with image-->
<Image Source="{Binding Image}" />
<StackPanel Width="311" Margin="8,-5,0,5">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="0,5,10,0" Style="{StaticResource PhoneTextSmallStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" VerticalAlignment="Center" />
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem>
<TextBlock HorizontalAlignment="Left" Height="105" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="154" Margin="0,-10,0,0"/>
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
You should define your rows and columns in a Grid control inside a panorama item, instead of defining them in the layout root grid:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Panorama control-->
<phone:Panorama Title="My Panorama" >
<!--Panorama item one-->
<phone:PanoramaItem Header="item 1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="148*"/>
<ColumnDefinition Width="225*"/>
<ColumnDefinition Width="107*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="351*"/>
<RowDefinition Height="201*"/>
<RowDefinition Height="248*"/>
</Grid.RowDefinitions>
</Grid>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem Header="item 2">
</phone:PanoramaItem>
</phone:Panorama>
</Grid>