I have the following XAML markup, which I am trying to use to display a WebKitBrowser below some buttons on the the GUI of my application:
<DockPanel VerticalAlignment="Stretch" Height="Auto" HorizontalAlignment="Stretch" Width="Auto">
<Grid x:Name="browserGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Style="{DynamicResource NoChromeButton}" Click="backBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" Height="30" Width="40" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1">
<Image Source="C:\...\arrow_left.png" Height="30" Width="40" />
</Button>
<Button Style="{DynamicResource NoChromeButton}" Click="RefreshBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" Height="30" Width="40" VerticalAlignment="Top" Grid.Row="1" Grid.Column="2" >
<Image Source="C:\...\arrow_loop3.png" Height="30" Width="30" />
</Button>
<Button Style="{DynamicResource NoChromeButton}" Click="printBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" Height="30" Width="30" VerticalAlignment="Top" Grid.Row="1" Grid.Column="3">
<Image Source="C:\...\printer.png" Height="30" Width="30" />
</Button>
<Button Style="{DynamicResource NoChromeButton}" Name="referBtn" Click="referThis" Margin="0,0,0,0" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Height="30" Width="80" VerticalAlignment="Top" Grid.Row="1" Grid.Column="4">
<TextBlock>Refer</TextBlock>
</Button>
<Grid x:Name="grdBrowserHost" Height="650" Width="900" Margin="0,0,0,0" Grid.Row="2" Grid.Column="3"></Grid>
<!--/StackPanel-->
</Grid>
</DockPanel>
Basically, what I want to do, is display the buttons in a row above the WebKitBrowser, (which will be displayed inside the grdBrowserHost, to create a sort of 'navigation bar' inside the <DockPanel>
But for some reason, with what I'm doing above, I get the buttons displayed in the first few columns of the <grid>, and the browser displayed in the last column, but it's displayd 'next to' the buttons, rather than 'underneath, so the layout looks messy:
How can I fix the layout so that the WebKitBrowser content is displayed below the buttons, and not next to them? As you can see, I tried putting the grdBrowserHost grid (where the WebKitBrowser is displayed) inside the second row of the layout (i.e. one row below the row where the buttons are displayed), but this doesn't make any difference... anyone have any suggestions?
Edit
I tried setting the DockPanel.Dock="Bottom", as suggested in the answer, but this just seemed to cause the WebKitBrowser to be displayed 'on top' of some of the other elements being displayed on my GUI, so that the layout now looks like:
As you can see, the browser is now displayed 'on top' of a couple of the buttons that I had previously added to my GUI, instead of underneath them, like I want it to, or beside them, like it was before...
I have set all of the buttons to: DockPanel.Dock="Top", and the browser to DockPanel.Dock="Bottom"... but for some reason, the browser is displayed on top of the right-most couple of buttons...
The line I'm now using to add the browser to the GUI is:
<Grid x:Name="grdBrowserHost" Height="650" Width="900" Margin="0,0,0,0" Grid.Row="2" Grid.Column="3" DockPanel.Dock="Bottom"></Grid>
If I remove the grdBrowserHost's Row & Column, then the web browser takes up the whole GUI, and completely hides the buttons I've added:
Any other suggestions?
You need to set the Dock property of the controls you want to move around. So therefore:
<DockPanel VerticalAlignment="Stretch" Height="Auto" HorizontalAlignment="Stretch" Width="Auto">
<Grid x:Name="browserGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Style="{DynamicResource NoChromeButton}" Click="backBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" Height="30" Width="40" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1">
<Image Source="C:\...\arrow_left.png" Height="30" Width="40" />
</Button>
<Button Style="{DynamicResource NoChromeButton}" Click="RefreshBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" Height="30" Width="40" VerticalAlignment="Top" Grid.Row="1" Grid.Column="2" >
<Image Source="C:\...\arrow_loop3.png" Height="30" Width="30" />
</Button>
<Button Style="{DynamicResource NoChromeButton}" Click="printBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" Height="30" Width="30" VerticalAlignment="Top" Grid.Row="1" Grid.Column="3">
<Image Source="C:\...\printer.png" Height="30" Width="30" />
</Button>
<Button Style="{DynamicResource NoChromeButton}" Name="referBtn" Click="referThis" Margin="0,0,0,0" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Height="30" Width="80" VerticalAlignment="Top" Grid.Row="1" Grid.Column="4">
<TextBlock>Refer</TextBlock>
</Button>
<Grid x:Name="grdBrowserHost" DockPanel.Dock="Bottom" Height="650" Width="900" Margin="0,0,0,0" ></Grid>
<!--/StackPanel-->
</Grid>
</DockPanel>
Note the DockPanel.Dock = "Bottom" in the grid named grdBrowserHost. You will also need to remove the grdBrowserHosts column/row property as you want its parent to be the dockpanel, not the grid.
I should ponit out that the Buttons you have will default to DockPanel.Dock="Left" as this is the default when not defined
Related
In the textboxes from the code below, the blinking cursor doesn't show even after i click the textbox or when it has focus.I'm posting this big a code because i think perhaps it's the parent element properties that are somehow interfering with the texboxes but I can't seem to find a solution for this. Can someone please help.
<Canvas Name="encounterTab" Style="{StaticResource canvasRecording}" Visibility="Hidden" Width="{DynamicResource {x:Static SystemParameters.FullPrimaryScreenWidthKey}}" FocusManager.IsFocusScope="True">
<Grid Height="{DynamicResource {x:Static SystemParameters.FullPrimaryScreenHeightKey}}" Width="{DynamicResource {x:Static SystemParameters.FullPrimaryScreenWidthKey}}" Margin="0,0,0,0" FocusManager.IsFocusScope="True">
<DockPanel Style="{StaticResource screenTitleDock}" Grid.Row="0" VerticalAlignment="Top" >
<TextBlock Name="textBlock1" Style="{StaticResource screenTitle}">ENCOUNTER DETAILS</TextBlock>
</DockPanel>
<Grid Style="{StaticResource gridRecording}" SizeChanged="MainGrid_SizeChanged" Name="gridEncDetails" FocusManager.IsFocusScope="True">
<Grid.LayoutTransform>
<ScaleTransform
CenterX="0"
CenterY="0"
ScaleX="{Binding ElementName=myMainWindow, Path=ScaleValue}"
ScaleY="{Binding ElementName=myMainWindow, Path=ScaleValue}" />
</Grid.LayoutTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="188*"></ColumnDefinition>
<ColumnDefinition Width="149*"></ColumnDefinition>
<ColumnDefinition Width="63*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label x:Name="lblApptTime" Content="Time:" Grid.Column="0" Grid.Row="0" />
<TextBox x:Name="txtTime" GotKeyboardFocus="txtApptTimeKeyBoadFocus" GotMouseCapture="txtApptTime_MouseClick" Grid.Column="1" Grid.Row="0" Width="149" LostFocus="txtApptTime_LostFocus" HorizontalAlignment="Left" MouseDoubleClick="txtApptTime_MouseDoubleClick" Margin="0,11" Height="38" GotTouchCapture="txtApptTime_GotTouchCapture" />
<ComboBox x:Name="ddlAmPm" VerticalContentAlignment="Center" Grid.Row="0" Grid.Column="2" Width="55" IsSynchronizedWithCurrentItem="True" Margin="0,10" HorizontalAlignment="Right" Height="38">
<ComboBoxItem>AM</ComboBoxItem>
<ComboBoxItem>PM</ComboBoxItem>
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid >
<TextBlock Height="Auto"
HorizontalAlignment="Stretch"
VerticalAlignment="Center" />
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<Label x:Name="lblNo" Content="No:" Grid.Column="0" Grid.Row="1" Margin="0,11" Height="38" />
<TextBox x:Name="txtEncounterNumber" Grid.Column="1" Grid.Row="1" KeyDown="txtEncounterNumber_KeyUp" TextChanged="txtEncounterNumber_TextChanged" HorizontalAlignment="Left" Width="212" Margin="0,10" Grid.ColumnSpan="2" Height="Auto" />
<Button x:Name="btnNext1" Grid.Row="2" Grid.ColumnSpan="3" Style="{StaticResource btnRec}" Click="btnNext1_Click" TouchUp="btnTouchNext1_Click" Margin="50,20,50,10" >
<Image Source="Assets/btnNext.png" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Button>
</Grid>
</Grid>
</Canvas >
Note:- When i start typing the caret appears but disappears when i clear the textbox values.
It looks like you problem might comes from the ScaleTransform. If a TextBox is scaled to less then it's original size it's cursor disappears. This happens because the TextBox caret is with Width of 1 and when scaled down it becomes less then 1. So it's not visualized at all.
As a workaround make the minimal possible size as default so UI is only scaled up.
Another workaround it to create a custom caret like it's shown here WPF TextBox Inside ViewBox loses Cursor on resize
I have a XAML Page where I have 4 Grids (rectGrid, dateGrid, roomGrid, optionGrid) , 3 of them (rectGrid, dateGrid, roomGrid) are created dynamically (in Code Behind)
What i want to do is that the rectGrid is scrollable Horizontal and Vertical, but the roomGrid only Horizontal and the dateGrid only vertical
Here's the Code
<ScrollViewer Height="Auto" Width="Auto" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">
<Grid>
<Grid Name="optionsGrid">
<Label Name="lZeit" Content="Zeitraum: von" Margin="100,7,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"></Label>
<DatePicker Name="dpVon" Margin="192,7,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Height="23"></DatePicker>
<Label Name="lBis" Content="bis" Margin="372,7,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"></Label>
<DatePicker Name="dpBis" Margin="440,8,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Height="23"></DatePicker>
<Button Content="OK" Height="23" HorizontalAlignment="Left" Margin="620,6,0,0" Name="selectDates" VerticalAlignment="Top" Width="60" RenderTransformOrigin="-2.552,0.522" Click="selectDates_Click"/>
<Button Content="Drucken" Height="23" HorizontalAlignment="Left" Margin="740,6,0,0" Name="print" VerticalAlignment="Top" Width="60" RenderTransformOrigin="-2.552,0.522" Click="print_Click"/>
</Grid>
<Grid HorizontalAlignment="Stretch" Margin="100,70" Name="rectGrid" VerticalAlignment="Stretch" OpacityMask="Black" Opacity="1" ShowGridLines="False" Height="Auto" Width="Auto">
</Grid>
<Grid Height="30" HorizontalAlignment="Stretch" Margin="98,31,0,0" Name="dateGrid" VerticalAlignment="Top" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="656*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="1129*"/>
</Grid.ColumnDefinitions>
</Grid>
<Grid HorizontalAlignment="Left" Height="Auto" Width="82" Name="roomGrid" Margin="0,70">
</Grid>
</Grid>
</ScrollViewer>
Here's a Screenshot:
enter image description here
Instead of placing the Grids in a ScrollViewer, do this;
<Grid Name="optionsGrid" ScrollViewer.HorizontalScrollBarVisibility="Visible">
OR
<Grid Name="optionsGrid" ScrollViewer.VerticalScrollBarVisibility="Visible">
I don't really understand your question or the naming of the Grids so you will need to change that as you see fit.
I have solved it.
<Grid HorizontalAlignment="Stretch" Name="rectGrid" VerticalAlignment="Stretch" OpacityMask="Black" Opacity="1" ShowGridLines="False" Height="Auto" Width="Auto">
</Grid>
</ScrollViewer>
Metro, I have used this few days back and Now wish to add Flyout on scrollable window on bottom like fix menu bar. Is it possible?
Below is the code of XAML page for flyout genration, For temporary purpose I have added on top now,
<Controls:FlyoutsControl>
<Controls:Flyout Header="Actions" Name="TestFlyout" VerticalAlignment="Bottom" Position="Top" Width="990" Theme="Adapt">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"></ColumnDefinition>
<ColumnDefinition Width="20*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="Save" Width="70" Height="30" HorizontalAlignment="Left" Grid.Column="0"></Button>
<Button Content="Cancel" Width="70" Height="30" HorizontalAlignment="Left" Grid.Column="1"></Button>
</Grid>
</Controls:Flyout>
</Controls:FlyoutsControl>
Maybe you forgot to put your flyout in the flyouts. And you should use Position="Bottom" not VerticalAlignment="Bottom".
<Grid>
<ScrollViewer Name="scrlMain"
CanContentScroll="True"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
VerticalAlignment="Stretch">
<TextBlock Text="Test"></TextBlock>
</ScrollViewer>
<Controls:Flyout Header="Actions"
Name="TestFlyout"
IsOpen="True"
Position="Bottom"
Width="990"
Theme="Adapt">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"></ColumnDefinition>
<ColumnDefinition Width="20*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="Save"
Width="70"
Height="30"
HorizontalAlignment="Left"
Grid.Column="0"></Button>
<Button Content="Cancel"
Width="70"
Height="30"
HorizontalAlignment="Left"
Grid.Column="1"></Button>
</Grid>
</Controls:Flyout>
</Grid>
Hope this helps.
I have a expander which contains a grid in which I have a grid splitter.
The Document Outline and UI is like this
and here is the code.
<Grid x:Name="TopGrid" ShowGridLines="True" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MaxHeight="150"/>
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Expander x:Name="CompanyDescriptionExpander" Grid.ColumnSpan="2"
VerticalAlignment="Top" IsExpanded="True" Background="Black" >
<Expander.Header>
<Grid Width="{Binding ElementName=CompanyDescriptionExpander,
Path=ActualWidth}" Background="Aquamarine">
<TextBlock Grid.Column="0" Text="Expander Header" Foreground="Black" />
</Grid>
</Expander.Header>
<Expander.Content>
<Grid x:Name="DescriptionGrid" MaxHeight="130" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" MinHeight="25" MaxHeight="25"/>
<RowDefinition Height="Auto" MinHeight="25" MaxHeight="120"/>
<RowDefinition Height="4" MinHeight="10" MaxHeight="10"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Background="Orange" Grid.Row="0" Grid.RowSpan="2"
MinHeight="40" MaxHeight="120" x:Name="DescriptionText"
Text="TextBlock Content" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Top"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Auto" />
<Button x:Name="SaveIconButton" Grid.Column="1" Grid.Row="0" Width="20"
Height="20" VerticalAlignment="Top" />
<Button x:Name="CancelIconButton" Grid.Column="1" Grid.Row="1" Width="20"
Height="20" VerticalAlignment="Top" />
<GridSplitter ResizeBehavior="PreviousAndCurrent" ResizeDirection="Rows"
Grid.Row="2" Grid.ColumnSpan="2"
Height="10" MaxHeight="10" HorizontalAlignment="Stretch"
VerticalAlignment="Top" Background="Red" />
</Grid>
</Expander.Content>
</Expander>
<Button Grid.Row="1" Grid.Column="0" Margin="0,5,0,0" Height="20"
VerticalAlignment="Top" Background="Green" />
</Grid>
When we use grid splitter it expands
But it goes on even after textbox reaches its maximum height and gridsplitter goes behind button(green).
My problem scenario can be replicated copying my code in a project
I want that it should stop when textbox reaches its maximum height.
How to do that?
In your DescriptionGrid change the second rows MaxHeight from 120 to 95.
The combined max height of the three rows in that grid exceeds the max height of the grid itself.
I am new to windows phone7 development and have a little issue.
I have a textblock(Label) in my interface, and in runtime I use that label to display dyanamic data. The problem is when the text is too long(than the width of the screen), it only displays half of the data(Only the content that fits the width). It doesn't matter to go for multiple lines, but I want to display the full content. I tested with Textblock(Label) properties, but didn't find any working.
Can someone please help me. (I am Using visual studio 2010) . Thanks
Following is the XAML
<Grid x:Name="LayoutRoot" Height="98">
<Ellipse Height="25" HorizontalAlignment="Left" Name="ellipse1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="46" Margin="6,13,0,0" Fill="#FFDB4C4C" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="66,10,0,0" Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" Width="402" AllowDrop="False" TextWrapping="NoWrap" UseLayoutRounding="True" DataContext="{Binding}" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="66,44,0,0" Name="textBlock2" Text="TextBlock" VerticalAlignment="Top" Width="402" />
</Grid>
Setting the property TextWrapping = "Wrap" might solve your problem as long as there is enough vertical space.
EDIT
Depending on how you would like the resize behavior this should work:
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="auto" MinHeight="40" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Ellipse Margin="5" Stroke="Black" StrokeThickness="1" Fill="#FFDB4C4C" />
<TextBlock HorizontalAlignment="Left" Margin="5" Name="textBlock1" VerticalAlignment="Top" TextWrapping="Wrap" UseLayoutRounding="True" Grid.Column="1" Text="sdfsdf sdf sdf sdf sd f sdf" />
<TextBlock HorizontalAlignment="Left" Margin="5" Name="textBlock2" VerticalAlignment="Top" TextWrapping="Wrap" Grid.Column="1" Grid.Row="1" Text="sdfsdf sdf sdf sdf sd f sdf" />
</Grid>