I have ItemDetailPage.xaml with FlipView, inside of DataTemplate i have Grid with come columns. One of columns contains StackPanel with some controls.
Example:
<FlipView.ItemTemplate>
<DataTemplate>
<UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
<ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1">
<Grid Margin="120,0,20,20" x:Name="richTextColumns">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="400" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="400" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="2" Grid.Row="1" Margin="0,0,0,10" x:Name="ContentPanel">
<TextBlock FontSize="22" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap" />
<Image x:Name="image" Width="200" Margin="0,10,0,10" Stretch="UniformToFill" Source="{Binding Image}"/>
<StackPanel Orientation="Horizontal" Margin="0,0,0,5">
<RichTextBlock x:Name="InformationOriginalName" Width="250"
Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False">
<Paragraph>
<Run FontWeight="SemiLight" Text="{Binding EvaInformation.OriginalName}"/>
</Paragraph>
</RichTextBlock>
</StackPanel>
</StackPanel>
....
</Grid>
</ScrollViewer>
</UserControl>
</DataTemplate>
</FlipView.ItemTemplate>
How to stretch ContentPanel to FullScreen and hide all different controls, including Back button and title of page?
Related
My project is based on WPF. I have created a canvas Container. Under that container, I have two grids (gSettings and gGrid).
I have used GroupBox. Under Canvas Container (gCanvas), I have created two grids (gSettings and gGrid). Under gGrid, I am using Tab Controls (tabCtrlDevice). First time when the Window is loading, it's showing data correctly in both grids, but when I am changing the tab item of tab controls, the second grid i.e. gGrid then, gSettings is disappears.
Please help to sort out this issue.
Thanks in advance.
<GroupBox x:Name="DragDropgrpbox" Height="Auto" Width="Auto">
<ZoomableCanvas x:Name="zoomCtrl">
<Canvas x:Name="gCanvas">
<Grid x:Name="gSettings" Canvas.Left="0" Height="613">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border x:Name="wrapBrdr2" Grid.Column="1" Grid.ColumnSpan="2">
<WrapPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Name="ImageViewer2" Stretch="Fill" HorizontalAlignment="Center" Width="116" Height="107" Panel.ZIndex="1" VerticalAlignment="Center" />
</WrapPanel>
</Border>
</Grid>
<Grid x:Name="gGrid" Canvas.Left="140" Height="646">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="5"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="15"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="5"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5" />
<ColumnDefinition />
<ColumnDefinition x:Name="grdConverterColumn" MinWidth="140" Width="*"/>
<ColumnDefinition />
<ColumnDefinition x:Name="grdPortColumn" Width="*"/>
<ColumnDefinition />
<ColumnDefinition Width="5"/>
</Grid.ColumnDefinitions>
<Border x:Name="wrapBrdr" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2">
<WrapPanel>
<Image Name="ImageViewer1" Stretch="Fill" HorizontalAlignment="Left" Width="54" Height="49" Panel.ZIndex="1" />
<TextBlock x:Name="lblMessage" Grid.Column="3" Grid.Row="2" Grid.ColumnSpan="4">
<TextBlock.Inlines>
<Run x:Name="step1" />
<LineBreak/>
<Run x:Name="step2" />
<LineBreak/>
<Run x:Name="step3" />
</TextBlock.Inlines>
</TextBlock>
</WrapPanel>
</Border><TabControl x:Name="tabCtrlDevice" Grid.Column="1" Grid.Row="5" Grid.ColumnSpan="2" Grid.RowSpan="2">
<TabItem x:Name="CoriolisMVD" >
<TabItem.Content>
<UniformGrid x:Name="grdDevices" Columns="3" VerticalAlignment="Top"/>
</TabItem.Content>
</TabItem>
<TabItem x:Name="DensityViscosity">
<TabItem.Content>
<UniformGrid x:Name="grdDensityViscosity" Columns="2" VerticalAlignment="Top"/>
</TabItem.Content>
</TabItem>
<TabItem x:Name="RosemountFlow" >
<TabItem.Content>
<UniformGrid x:Name="grdRosemountFlow" Columns="2" VerticalAlignment="Top"/>
</TabItem.Content>
</TabItem>
<TabItem x:Name="Other" >
<TabItem.Content>
<UniformGrid x:Name="grdOther" Columns="2" VerticalAlignment="Top"/>
</TabItem.Content>
</TabItem>
</TabControl>
<!--End Device Tab Controler-->
<Grid Grid.Column="3" Grid.Row="6">
<UniformGrid x:Name="grdConverters" Columns="1" VerticalAlignment="Top"/>
</Grid>
<Border x:Name="grdPortsBrdr" Height="500px" Grid.Column="4" Grid.Row="6" HorizontalAlignment="Right" >
<ScrollViewer>
<UniformGrid x:Name="grdPorts" VerticalAlignment="Top"/>
</ScrollViewer>
</Border>
</Grid>
</Canvas>
</ZoomableCanvas>
</GroupBox>
After a lot struggle, I got a solution:
gCanvas.Children.Add(gSettings);
I have resolved it`
I'm trying to bind a DropShadowTextBlock (Like a TextBlock) But it is not possible because it is inside a DataTemplate, so it stays outside the form's tree.
I tried some ways I found here in the forum but no situation fit with mine.
Here's my XAML:
<Blacklight_Controls:DragDockPanel Background="White" x:Name="panel4" Header="Exams" d:LayoutOverrides="Width, Height" Maximized="Panel4Maximized" Restored="Panel4Restored" Minimized="Panel4Minimized" Margin="7">
<Blacklight_Controls:DragDockPanel.HeaderTemplate >
<DataTemplate >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Blacklight_Controls:DropShadowTextBlock
Text="{Binding TituloModelo}"
FontFamily="Verdana"
FontSize="11"
VerticalAlignment="Center"
Margin="1"
TabIndex="1000"
DropShadowDistance="0"
DropShadowAngle="45"
Foreground="Black">
</Blacklight_Controls:DropShadowTextBlock>
<Image Grid.Column="2"
code/>
<Image Grid.Column="3"
code"/>
<Image Grid.Column="4"
code"/>
</Grid>
</DataTemplate>
</Blacklight_Controls:DragDockPanel.HeaderTemplate>
<Grid>
<Grid x:Name="name0" />
<localControls:LastExam x:Name="nameLastExam"/>
<Grid x:Name="name1" Visibility="Collapsed" />
<Grid x:Name="name2" Visibility="Collapsed" />
<Grid x:Name="name3" Visibility="Collapsed" />
</Grid>
</Blacklight_Controls:DragDockPanel>
How can I do it?
I'm using Visual Studio 2013 and I wrote some code for Windows Phone 8.1 Apps in C#. Now I've got a little problem with the layout in XAML with grids.
Elements in grids should be ordered/layered in the order in the code, but this didn't work for me. I've got two grids in a grid and the comboboxlist of the first grid is overlapped by the other grid/textblock. I tried to rearrange the grid in XAML, but that also did not solved the problem.
overlapping image from the app
In this image there should be 2 more items in the open combobox list, but those are overlapped by the grid below it.
Here is the code snippet:
<Grid Margin="0, 50, 0, 0">
<Grid.RowDefinitions>
<RowDefinition Height="115"/>
<RowDefinition Height="80"/>
<RowDefinition Height="80"/>
<RowDefinition Height="115"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--Third Row-->
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Style="{StaticResource StandardAppHeaderTextBlock}"
Text="Woche:"/>
<ComboBox Name="WochenComboBox"
Grid.Column="0"
Style="{StaticResource StandardAppComboBox}"/>
<TextBlock Grid.Column="1"
Style="{StaticResource StandardAppHeaderTextBlock}"
Text="Ort:"/>
<TextBox Name="OrtTextBox"
Grid.Column="1"
Style="{StaticResource StandardAppTextBox}"/>
</Grid>
<!--Second Row-->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Style="{StaticResource StandardAppHeaderTextBlock}"
Text="Stunde:"/>
<ComboBox Name="StundenZeitenComboBox"
Grid.Column="0"
Style="{StaticResource StandardAppComboBox}"
ItemsSource="{Binding Einstellung, Converter={StaticResource EinstellungsStundenToComboBoxListConverter}}"
DisplayMemberPath="Value"
SelectionChanged="StundenZeitenComboBox_SelectionChanged"/>
<TextBlock Grid.Column="1"
Style="{StaticResource StandardAppHeaderTextBlock}"
Text="Veranstaltungsart:"/>
<ComboBox Name="VeranstaltungsartComboBox"
Grid.Column="1"
Style="{StaticResource StandardAppComboBox}"/>
</Grid>
</Grid>
What should I use/do to remove this overlpapping.
Use stack panels. Items inside a stack panel will not overlap.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="115" />
<RowDefinition Height="80" />
<RowDefinition Height="80" />
<RowDefinition Height="115" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--Third Row-->
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="Woche:" />
<ComboBox Name="WochenComboBox" Grid.Column="0" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="Ort:" />
<TextBox Name="OrtTextBox" Grid.Column="1" />
</StackPanel>
</Grid>
<!--Second Row-->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="Stunde:" />
<ComboBox Name="StundenZeitenComboBox" Grid.Column="0" DisplayMemberPath="Value" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="Veranstaltungsart:" />
<ComboBox Name="VeranstaltungsartComboBox" Grid.Column="1" />
</StackPanel>
</Grid>
</Grid>
I have this LongListSelector in my app page:
<Controls:LongListSelector x:Name="searchList" Margin="0,0,0,0" Background="White" SelectionChanged="DidPressSelectSearchList" HorizontalContentAlignment="Stretch" Grid.Row="1">
<Controls:LongListSelector.ItemTemplate>
<DataTemplate>
<local:SearchTemplateSelector Content="{Binding}" HorizontalContentAlignment="Stretch">
<local:SearchTemplateSelector.GoogleSuggestTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Rectangle Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Fill="Black" Opacity="0.3"/>
<TextBlock Text="{Binding}" FontSize="25" Foreground="Black" TextWrapping="Wrap" Grid.Row="1" Margin="0,10"/>
</Grid>
</DataTemplate>
</local:SearchTemplateSelector.GoogleSuggestTemplate>
<local:SearchTemplateSelector.VideoTemplate>
<DataTemplate>
<Grid>
<Rectangle Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Fill="Black" Opacity="0.3" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Margin="0" Source="{Binding Path=ImgUrl}" HorizontalAlignment="Left" Width="100" Height="100" Tag="{Binding idStr}"/>
<Grid Grid.Column="1" Margin="10,0,8,0">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Name}" FontSize="20" Foreground="Black" TextWrapping="Wrap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<StackPanel Orientation="Horizontal" Margin="0,-5,0,0" Grid.Row="1">
<TextBlock Text="Views: " FontSize="20" Foreground="Black"/>
<TextBlock Text="{Binding ViewCount}" FontSize="20" Foreground="Black"/>
</StackPanel>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding TimeStr}" FontSize="20" Foreground="Black" Margin="0,0,0,0" />
<TextBlock Text="Cached" FontSize="20" Foreground="Red" Margin="20,0,0,0" Grid.Column="1" />
</Grid>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</local:SearchTemplateSelector.VideoTemplate>
</local:SearchTemplateSelector>
</DataTemplate>
</Controls:LongListSelector.ItemTemplate>
</Controls:LongListSelector>
And i noticed that when i press a item in the list so the user not have any thing to know which item he pressed, something like focus the item when he press it.
In iPhone the the selected row get blue and when release the blue selection is disappear,there is some equivalent to this in windows phone too?
Use TiltEffect from Silverlight Toolkit for Windows Phone, details are here http://www.geekchamp.com/articles/silverlight-for-wp7-toolkit-tilteffect-in-depth. Also to make an effect more expressive use Button as a container for your ItemTemplate with EmptyButtonStyle http://www.jeff.wilcox.name/2011/10/hyperlinkbutton-empty-style-for-phone/.
I have a DockPanel with two Grids (DockPanel.Dock="Right/Left"). In the left i have a TreeView and in the right i have some TextBoxes. If i resize my window the panels resize proportinal.
My problem is, if i write long text in a TextBox the TextBox enlarge and hide my left DockPanel instead of a break the text.
I have set minwidth of the left DockPanel to '300' and set TextWrapping in the TextBoxes to 'wrap' but nothing helps.
Source:
<Grid Background="#FF58ACFC" Name="main">
<DockPanel>
<Grid DockPanel.Dock="Right" Margin="0,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="200" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
<RowDefinition Height="26"/>
<RowDefinition Height="26"/>
<RowDefinition Height="60" />
<RowDefinition Height="26"/>
<RowDefinition />
</Grid.RowDefinitions>
<Label Content="Titel:" Grid.Row="0"/>
<TextBox Grid.Row="1" IsReadOnly="False">
<Label Content="Frage:" Grid.Row="2"/>
<TextBox Grid.Row="3" TextWrapping="Wrap" IsReadOnly="False" AcceptsReturn="True">
<Label Content="Antwort:" Grid.Row="4"/>
<TextBox Grid.Row="5" IsReadOnly="False" TextWrapping="Wrap" />
</Grid>
<Grid DockPanel.Dock="Left" Margin="5,0,0,0">
<DockPanel>
<Grid DockPanel.Dock="Left">
<DockPanel LastChildFill="True">
<Grid DockPanel.Dock="Top" Height="26">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Content="Kategorie" Grid.Column="0"/>
<Button Grid.Column="1" BorderThickness="0" HorizontalAlignment="Right">
</Grid>
<TreeView HorizontalAlignment="Stretch" VerticalAlignment="Stretch"Padding="0,0,15,0" />
</DockPanel>
</Grid>
<Grid DockPanel.Dock="Right">
<DockPanel LastChildFill="True">
<Grid DockPanel.Dock="Top" Height="26">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Content="Lernkarten" Grid.Column="0"/>
<Button Grid.Column="1" Width="26" Click="ButtonAddItem_Click">
</Grid>
<ListView />
</DockPanel>
</Grid>
</DockPanel>
</Grid>
</DockPanel>
</Grid>
That's pretty much why Dockpanels are useless :-)
I suggest using Grid..