I am working on a multi-lingual WPF app. The user must provide input for multiple languages at same time. This works but it also moves fields below it.
What I am looking for is somewhat like this:
What I have done so far is below:
<Label Grid.Column="0" Grid.Row="0" Content="Field1" Padding="0" Style="{DynamicResource ControlLabel}"/>
<Label Grid.Column="1" Grid.Row="0" Content=":" Style="{DynamicResource ControlLabelMiddle}"/>
<StackPanel Grid.Column="2" Grid.Row="0" Margin="3" Style="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<TextBox x:Name="txtField1" Height="23" GotKeyboardFocus="txtField1_GotKeyboardFocus" />
<Grid Background="White" x:Name="pnlField1" Visibility="Collapsed" Panel.ZIndex="99">
<Border BorderBrush="blue" BorderThickness="3">
<StackPanel Background="White" Margin="5">
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Label Content="Language2" HorizontalAlignment="Left"/>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" FontSize="10" Padding="2" >
<Hyperlink Hyperlink.Click="btnClose_Click" x:Name="btnClose" >X</Hyperlink>
</TextBlock>
</StackPanel>
<TextBox x:Name="txtField_Second" Height="23" Width="280" />
</StackPanel>
</Border>
</Grid>
</StackPanel>
When the above control gets focus, my second language panel comes up. But it moves my next row controls down and doesn't look good.
To keep the panels from moving, try placing them in a Grid, rather than a StackPanel. This enables you to specifically define where each element is placed in the Grid. In a StackPanel, elements "stack" on top of each other. As contents of the panels change, the amount of space each element takes up in the "stack" also has the potential to change.
Related
my problem is how to create a docking panel on Windows Presentation Foundation c# ? I don't know a call it is docking panel is true or false, because some documents call like that. but it like toolbox, server explorer in visual studio. i searched so many documents but there are nothing, every thing are generality to show the view. I want to know how to code to create it. I'm sorry first because i had a stupid question. So can i help me do that ? or have some documents can help me ? Thank !
You can create your docking panel in the xaml code by calling DockPanel, then you set the property lastchildfill to true so that the order of created elements will determine how they behave and will define their position in the window, as shown in code bellow.
<Grid>
<DockPanel LastChildFill="True">
<StackPanel DockPanel.Dock="Left" Width="50" HorizontalAlignment="Left" Background="Aqua">
<Label Content="1" HorizontalAlignment="Center"/>
</StackPanel>
<StackPanel DockPanel.Dock="Top" Background="Beige" Height="50">
<Label Content="2" HorizontalAlignment="Center"/>
</StackPanel>
<StackPanel DockPanel.Dock="Bottom" Background="Red" Height="100">
<Label Content="3" HorizontalAlignment="Center"/>
</StackPanel>
<StackPanel DockPanel.Dock="Right" Background="Yellow" Width="100">
<Label Content="4" HorizontalAlignment="Center"/>
</StackPanel>[![enter image description here][1]][1]
<StackPanel DockPanel.Dock="Bottom" Background="Gray" Height="50">
<Label Content="5" HorizontalAlignment="Center"/>
[![enter image description here][1]][1]</StackPanel>
<StackPanel DockPanel.Dock="Right" Background="Black" Width="50">
<Label Content="6" HorizontalAlignment="Center" Background="White"/>
</StackPanel>
</DockPanel>
</Grid>
I am sorry for my bad English.
I want to make a program for windows 8.1 universal. I have a question about design UI. I have a menu in top of my app for choose one option to see full information at the bottom of page. I want to make page that work for all different page size and resolutions. When person change the size of app windows, the top menu must changed like here. (for example when person decrease size of page):
Please save image because It's gif with animation.
I try to use viewbox but viewbox make the button in top menu smaller so button's boarder is changed. (or maybe I don't know how to do it)
It's my code But It doesn't work like my example:
<Viewbox>
<StackPanel Orientation="Horizontal">
<StackPanel x:Name="StackConnectionInfor" Orientation="Horizontal" Margin="10,0,30,0" Width="300" Background="Red">
<Image Height="75" Width="75" Source="Images/CommandImage/ImageCommandInformation.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Margin="25,0,0,0" FontSize="35" VerticalAlignment="Center" TextAlignment="Center">Connection<LineBreak/>Information</TextBlock>
</StackPanel>
<StackPanel x:Name="StackConnectionReport" Orientation="Horizontal" Margin="30,0" Width="300" Background="Red">
<Image Height="75" Width="75" Source="Images/CommandImage/ImageCommandReport.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Margin="25,0,0,0" FontSize="35" VerticalAlignment="Center" TextAlignment="Center">Connection<LineBreak/>Reports</TextBlock>
</StackPanel>
<StackPanel x:Name="StackConnectionChart" Orientation="Horizontal" Margin="30,0" Width="300" Background="Red">
<Image Height="75" Width="75" Source="Images/CommandImage/ImageCommandChart.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Margin="25,0,0,0" FontSize="35" VerticalAlignment="Center" TextAlignment="Center">Connection<LineBreak/>Chart</TextBlock>
</StackPanel>
</StackPanel>
</Viewbox>
Is it possible to help me?
Thanks.
You can use Grid as a container and define 4 columns:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
I have the following XAML in my Windows Phone app:
<StackPanel Orientation="Horizontal">
<Grid x:Name="LayoutRoot">
<Image Source="{Binding ImageUrl}" Height="80" HorizontalAlignment="Left" Margin="10,10,0,0" Stretch="Fill" VerticalAlignment="Top" Width="93" />
<TextBlock name="NameBlock" Text="{Binding Name}" FontSize="30" Margin="150,20,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Width="300" />
<TextBlock name="DescriptionBlock" Text="{Binding Description}" FontSize="25" Margin="150,150,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Width="300" />
</Grid>
</StackPanel>
Currently, I have the margin of the second TextBlock (DescriptionBlock) set to a static value. Now because I have the work wrapping of the first TextBlock (NameBlock) set to "Wrap", the height of the TextBlock is variable.
Does anyone know how to make the top-margin of DescriptionBlock equal to the automatic height of NameBlock? This would ensure that the second DescriptionBlock appears directly below the NameBlock, regardless of the length of the text of NameBlock.
Many thanks!
Brett
This is what panels are for. Wrap the two text blocks in stack panel and it will stack the text blocks one above the other.
<Grid x:Name="LayoutRoot">
<Image Source="{Binding ImageUrl}" Height="80" HorizontalAlignment="Left" Margin="10,10,0,0" Stretch="Fill" VerticalAlignment="Top" Width="93" />
<StackPanel Margin="150,20,0,0" Width="300">
<TextBlock name="NameBlock" Text="{Binding Name}" FontSize="30" TextWrapping="Wrap" HorizontalAlignment="Left" />
<TextBlock name="DescriptionBlock" Text="{Binding Description}" FontSize="25" TextWrapping="Wrap" HorizontalAlignment="Left" />
</StackPanel>
</Grid>
A panel that holds a single child is usually useless, so I removed the stack panel around the grid.
If you'd like to continue using Grid you can define rows for it to size automatically.
Hi I am trying to use a ScrollViewer but it is not working properly it keeps snapping back to the top when I drag down to view rest of the view.
I've tried setting the height statically to the design height of the page but that does not work either and tried wrapping it in a grid.
here is my xaml
<ScrollViewer Height="768">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="myApp" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Menu" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223" HorizontalAlignment="Left" Margin="0,15,0,0" Name="rectangle1" VerticalAlignment="Top" Click="rectangle1_Click">
<Image Name="image1" Source="/Images/1.png" />
</Button>
<Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223" Margin="227,15,0,0" HorizontalAlignment="Left" Name="rectangle2" VerticalAlignment="Top" Click="rectangle2_Click">
<Image Name="image2" Source="/Images/2.png" />
</Button>
<Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223" Margin="0,0,0,138" HorizontalAlignment="Left" Name="rectangle3" VerticalAlignment="Bottom" Click="rectangle3_Click">
<Image Name="image3" Source="/Images/3.png" />
</Button>
<Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223" Margin="227,0,0,138" HorizontalAlignment="Left" Name="rectangle4" VerticalAlignment="Bottom">
<Image Name="image4" Source="/Images/4.png" />
</Button>
<Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223" Margin="0,0,0,-89" HorizontalAlignment="Left" Name="rectangle" VerticalAlignment="Bottom" IsTabStop="True">
<Image Name="image5" Source="/Images/5.png" />
</Button>
<TextBlock Foreground="White" Height="59" FontSize="30" HorizontalAlignment="Left" Margin="79,183,0,0" Name="textBlock1" Text="Stop Gap" VerticalAlignment="Top" Width="133" />
<TextBlock Foreground="White" Height="59" FontSize="30" HorizontalAlignment="Left" Margin="285,183,0,0" Name="textBlock2" Text="Time Lapse" VerticalAlignment="Top" Width="150" />
<TextBlock Foreground="White" Height="40" FontSize="30" HorizontalAlignment="Left" Margin="96,413,0,0" Name="textBlock3" Text="Projects" VerticalAlignment="Top" Width="116" />
<TextBlock Foreground="White" Height="50" HorizontalAlignment="Left" FontSize="30" Margin="321,413,0,0" Name="textBlock4" Text="Settings" VerticalAlignment="Top" Width="114" />
</Grid>
<ScrollViewer>
</ScrollViewer>
</Grid>
</ScrollViewer>
I would appreciate if you could help me thanks.
The reason why your current implementation does not work is because your definition essentially tells Silverlight to place all of the Image controls and TextBlock controls into a single grid cell. This means that all of the objects using the grid as a basis of their positioning and scaling, rather than stacking against each other as you seem to expect in your code.
The result of this is the controls overlapping each other, making it look like there is only 1 control visible (you may be seeing 2 controls as you are forcing "bottom" alignment to some items in the grid, which means these will be aligned to the bottom of the cell and won't overlap the other controls that are aligned to the top. This is probably why it looks like only part of the list is being shown by the ScrollViewer).
Josemiguel's answer does explain one suitable solution. Another (and I think) simpler choice would be to use one or more StackPanel controls, which will force the controls to stack against each other in a specified orientation (Vertical is default). It is also possible to stack and nest StackPanels against eachother also.
MSDN: http://msdn.microsoft.com/en-us/library/system.windows.controls.stackpanel(v=vs.95).aspx - T - Scroll to the bottom of the MSDN page to see a nice example of a stackpanel using several coloured rectangles.
The best way to achive it is by using some kind of control like WrapPanel and create an empty DataTemplate to dynamically add all the items you want. Here and here you'll find an example.
i design page bellow code.
<ScrollViewer VerticalScrollBarVisibility="Visible" Grid.Row="1" x:Name="svProduct">
<StackPanel>
<ItemsControl x:Name="lstSearchResult" ItemsSource="{Binding Path=PIProductList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Width="480" Style="{Binding CellStyle}" Orientation="Horizontal" VerticalAlignment="Center" Height="50" >
<TextBlock Foreground="Black" FontSize="20" Width="320" FontFamily="Tahoma" Margin="10,0,0,0" Text="{Binding Title}" VerticalAlignment="Center" TextWrapping="Wrap"></TextBlock>
<Button Name="btnBookmark" Click="btnBookmark_Click" Tag="{Binding}" Background="Transparent">
<Button.Content>
<Image Source="/Images/bookmarks_red.png" Width="33" Height="30" VerticalAlignment="Top" Margin="-15"></Image>
</Button.Content>
</Button>
<Button BorderThickness="0" x:Name="btnSubmit" Click="btnSubmit_Click" Background="Transparent" Tag="{Binding}" >
<Button.Content>
<Image Name="ram" Source="/Images/blue_arrow.png" Width="40" Height="40" VerticalAlignment="Top" Margin="-15"></Image>
</Button.Content>
</Button>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
i want to access for btnBookmark visuble false .
can't access btnBookmark.Visibility=Visibility.collapsed
how to do this?
please help to me...........
The best way I know to do this is to create a Visiblity property on your item ViewModel (the one that is bound to each row in your ItemsControl) and toggle that value based on the changes to each item, presumably via the toggle button in each row. I don't know of a good way to "loop and look" for these internal controls. You're much better off using the existing data binding infrastructure to manage this for you.