I'm using tabitems for separating some information but as each one has different information, each one has a different size. I wonder how I could make both have the same size just changing the XAML file.
Basically, the code I did is:
<WrapPanel>
<DockPanel LastChildFill="False">
<TextBlock HorizontalAlignment="Left" DockPanel.Dock="Top" Text="Client Name" />
<TextBox MinWidth="100" HorizontalAlignment="Left" DockPanel.Dock="Top" Text="{Binding Path=ClientName, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True,NotifyOnValidationError=True}" MaxWidth="200" />
<TextBlock HorizontalAlignment="Left" DockPanel.Dock="Top" Text="Date" />
<TextBox MinWidth="100" HorizontalAlignment="Left" DockPanel.Dock="Top" Text="{Binding Path=ClientDate, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True,NotifyOnValidationError=True}" MaxWidth="200" />
<TabControl DockPanel.Dock="Top">
<TabItem ..>
</TabItem>
<TabItem ..>
</TabItem>
</TabControl>
<WrapPanel>
<Button ../>
<Button ../>
</WrapPanel>
</DockPanel>
</WrapPanel>
Regards
Claudio
Check
Let WPF Tabcontrol height assume height of largest item?
Comment here if it doesn't help
Related
I have two buttons on either side of a Label.
If either of these Buttons get removed, I want the Label to stay centered in a fixed position.
Is there any way to lock the position of this Label?
<DockPanel LastChildFill="True">
<DockPanel DockPanel.Dock="Top" Margin="4,8,4,8" LastChildFill="True">
<Button Name="SearchBackButton" Style="{DynamicResourceInfoButtonStyle}" Content="{StaticResource SearchBackButton}"
VerticalAlignment="Center" HorizontalAlignment="Left" Margin="4,0,0,0" BorderBrush="Transparent" Background="Transparent" DockPanel.Dock="Left" Click="SearchBackButton_Click" />
<Label HorizontalAlignment="Center" FontFamily="HelveticaNeue" FontSize="14" FontStyle="Normal" FontWeight="SemiBold" Foreground="#273238" Name="SuggestedTemplatesText" Content="{x:Static res:UIStrings.SuggestedTemplates}"/>
<Button Name="info_icon" Style="{DynamicResource InfoButtonStyle}" Click="InfoButton_Click"
VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,4,0" BorderBrush="Transparent" Background="Transparent" DockPanel.Dock="Right"/>
</DockPanel>
</DockPanel> <!-- Added by edit -->
This is the code for the Label and the two Buttons.
I have a TreeView that is using a single HierarchicalDataTemplate. I know how to bind to a property of the parent TreeViewItem in a HierarchicalDataTemplate:
<Button
Command="{Binding DataContext.RemoveCommand,
RelativeSource={RelativeSource AncestorLevel=2,
AncestorType=TreeViewItem}}"
CommandParameter="{Binding ElementId}" />
However, this does of course not work for the top-most items, since there is no ancestor TreeViewItem - here, I want to use the DataContext of the TreeView itself. How can I bind the command to the TreeView's DataContext for the top-most elements of the tree view? If necessary, you can assume that the view model has a property of the same name as the hierarchical view models representing each tree item.
This is my modified MainWindow.xaml based on the SubModelCollection example of Elmish.WPF (repo on GitHub), that demonstrates how I thought I solved the problem. As I mentioned in the comment to the OP, I encountered a new problem with this solution, but I hope it can be ironed out without too much effort. I have a feeling it's a trivial problem that remains.
My intention here is that one HierarchicalDataTemplate will be used for the top level items, and another for all other items. To my surprise it looks like it actually works as far as manipulating the data correctly, and the buttons work on all levels, but WPF is not happy with what's going on. Nodes on level two collapses visually when I add, remove or move subnodes below them, and the Output pane in VS has something to tell:
"System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'TreeViewItem' (Name=''); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
"
I had the same kind of error before introducing SharedPart, so I don't think that's causing it.
This is MainWindow.xaml, the only file I modified.
<Window
x:Class="Elmish.WPF.Samples.SubModelCollection.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Single counter" Height="800" Width="1000"
WindowStartupLocation="CenterScreen">
<Window.Resources>
<DataTemplate x:Key="SharedPart">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding CounterId}" Width="250" Margin="10,5,10,5" />
<TextBlock Text="{Binding CounterValue, StringFormat='Counter value: {0}'}" Width="100" Margin="0,5,10,5" />
<Button Command="{Binding Decrement}" Content="-" Margin="0,5,10,5" Width="30" />
<Button Command="{Binding Increment}" Content="+" Margin="0,5,10,5" Width="30" />
<Button Command="{Binding Reset}" Content="Reset" Margin="0,5,10,5" Width="50" />
<TextBlock Text="{Binding StepSize, StringFormat='Step size: {0}'}" Margin="0,5,10,5" />
<Slider Value="{Binding StepSize}" TickFrequency="1" Maximum="10" Minimum="1" IsSnapToTickEnabled="True" Width="100" Margin="0,5,10,5" />
<Button Command="{Binding AddChild}" Content="Add child" Margin="0,5,10,5" />
</StackPanel>
</DataTemplate>
<HierarchicalDataTemplate x:Key="Level2Data" ItemsSource="{Binding Path=ChildCounters}">
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource SharedPart}"/>
<Button
Command="{Binding DataContext.Remove, RelativeSource={RelativeSource AncestorType={x:Type TreeViewItem}, AncestorLevel=2}}"
CommandParameter="{Binding CounterId}"
Content="×" Margin="0,5,10,5" Width="20" />
<Button
Command="{Binding DataContext.MoveUp, RelativeSource={RelativeSource AncestorType={x:Type TreeViewItem}, AncestorLevel=2}}"
CommandParameter="{Binding CounterId}"
Content="↑" Margin="0,5,10,5" Width="20" />
<Button
Command="{Binding DataContext.MoveDown, RelativeSource={RelativeSource AncestorType={x:Type TreeViewItem}, AncestorLevel=2}}"
CommandParameter="{Binding CounterId}"
Content="↓" Margin="0,5,10,5" Width="20"/>
</StackPanel>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate x:Key="Level1Data" ItemsSource="{Binding Path=ChildCounters}" ItemTemplate="{StaticResource Level2Data}">
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource SharedPart}"/>
<Button
Command="{Binding DataContext.Remove, RelativeSource={RelativeSource FindAncestor, AncestorType=TreeView}}"
CommandParameter="{Binding CounterId}"
Content="×" Margin="0,5,10,5" Width="20" />
<Button
Command="{Binding DataContext.MoveUp, RelativeSource={RelativeSource FindAncestor, AncestorType=TreeView}}"
CommandParameter="{Binding CounterId}"
Content="↑" Margin="0,5,10,5" Width="20" />
<Button
Command="{Binding DataContext.MoveDown, RelativeSource={RelativeSource FindAncestor, AncestorType=TreeView}}"
CommandParameter="{Binding CounterId}"
Content="↓" Margin="0,5,10,5" Width="20"/>
</StackPanel>
</HierarchicalDataTemplate>
</Window.Resources>
<StackPanel Margin="0,20,0,10">
<Button Command="{Binding AddCounter}" Content="Add counter" Width="150" Margin="0,0,0,20" />
<TreeView ItemsSource="{Binding Counters}" ItemTemplate="{StaticResource Level1Data}">
</TreeView>
</StackPanel>
I'm making an app for Windows Phone 8.1 and I've run into some troubles with how the elements are displayed on the screen in different resolutions.
My question is: How can I display two columns with X number of rows, where the width of the columns will stretch to the side of the screen, no matter the screen size (for phones).
[1] Just to give you a visual example, this is how I want it to look, no matter the screen size (picture number [1]): (There are more rows below, but I removed them for this example).
http://imgur.com/a/DTYsg
[2] However, on bigger screens (this case a 6-inch), the content does not stretch all the way out, as shown in picture number [2].
[3] I've tried adding a Viewbox around the content, but then the result is like picture number [3] in the imgur link (couldn't upload more than one link). It stretches out, but it doesn't give me two columns. I've tried setting a max width for the Viewbox as well, but it doesn't change anything.
My XAML code so far is:
<ScrollViewer>
<Grid>
<GridView x:Name="ContentGrid" Margin="0,5,0,5" HorizontalAlignment="Center">
<GridView.Header>
<TextBlock TextWrapping="Wrap" Margin="0,5,0,5" HorizontalAlignment="Center" Text="Application name" Style="{StaticResource HeaderStyle}" />
</GridView.Header>
<!-- Row 1 -->
<GridViewItem Tapped="GridViewItem_Tapped_1" Style="{StaticResource GridStyleOdd}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Angle.png" Margin="0,-9,5,9" />
<TextBlock Text="Angle" Style="{StaticResource TextBlockStyle}" />
</Grid>
</GridViewItem>
<GridViewItem Tapped="GridViewItem_Tapped_1" Style="{StaticResource GridStyleOdd}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Area.png" Margin="0,-9,5,9" />
<TextBlock Text="Area" Style="{StaticResource TextBlockStyle}" />
</Grid>
</GridViewItem>
<!-- Row 2 -->
<GridViewItem Style="{StaticResource GridStyleEven}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Fuel_Consumption.png" Margin="0,-9,5,9" />
<TextBlock Text="Consumption" Style="{StaticResource TextBlockStyle}" Margin="10,0,0,-23" Width="188" />
</Grid>
</GridViewItem>
<GridViewItem Tapped="GridViewItem_Tapped_2" Style="{StaticResource GridStyleEven}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Currency.png" Margin="0,-9,5,9" />
<TextBlock Text="Currency" Style="{StaticResource TextBlockStyle}" />
</Grid>
</GridViewItem>
</GridView>
</Grid>
</ScrollViewer>
Thank you!
You can change the size of one from the GridViewItems in code behind
e.x.
public MainPage()
{
//....
var bounds = Window.Current.Bounds;
double height = bounds.Height;
double width = bounds.Width;
gridViewitem1.Width = width * 0.5f;
ContentGrid.Width = width;
}
I've tested it on all sizes.
EDIT:
You must change the width of the ContentGrid, too.
And remove the grid, wich is in the Scrollviewer
<ScrollViewer>
<GridView x:Name="ContentGrid" Margin="0,5,0,5" HorizontalAlignment="Center">
<GridView.Header>
<TextBlock TextWrapping="Wrap" Margin="0,5,0,5" HorizontalAlignment="Center" Text="Application name" Style="{StaticResource HeaderStyle}" />
</GridView.Header>
<!-- Row 1 -->
<GridViewItem x:Name="gridViewItem1" Tapped="GridViewItem_Tapped_1" Style="{StaticResource GridStyleOdd}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Angle.png" Margin="0,-9,5,9" />
<TextBlock Text="Angle" Style="{StaticResource TextBlockStyle}" />
</Grid>
</GridViewItem>
<GridViewItem Tapped="GridViewItem_Tapped_1" Style="{StaticResource GridStyleOdd}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Area.png" Margin="0,-9,5,9" />
<TextBlock Text="Area" Style="{StaticResource TextBlockStyle}" />
</Grid>
</GridViewItem>
<!-- Row 2 -->
<GridViewItem Style="{StaticResource GridStyleEven}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Fuel_Consumption.png" Margin="0,-9,5,9" />
<TextBlock Text="Consumption" Style="{StaticResource TextBlockStyle}" Margin="10,0,0,-23" Width="188" />
</Grid>
</GridViewItem>
<GridViewItem Tapped="GridViewItem_Tapped_2" Style="{StaticResource GridStyleEven}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Currency.png" Margin="0,-9,5,9" />
<TextBlock Text="Currency" Style="{StaticResource TextBlockStyle}" />
</Grid>
</GridViewItem>
</GridView>
I just implemented a GridView with groups feature. I have a list of TVshows's episodes which are grouped by diffusion date.
When I have more than 3 episodes by date, I want to have my items wrapped and go next to the group title, at this time, the next items are going outside of the screen, and it not what I wanted.
As you can see, there is other episodes under the dupplicated one for each day, I want them to go next to the others, not under.
Here is my XAML code, thanks :)
<GridView Margin="70,0,0,40" ItemsSource="{Binding Source={StaticResource cvsActivities}}">
<GridView.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</GridView.Template>
<GridView.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition IsStaggeringEnabled="True" />
<RepositionThemeTransition />
<AddDeleteThemeTransition />
</TransitionCollection>
</GridView.ItemContainerTransitions>
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<StackPanel Orientation="Vertical">
<Grid Name="grid_image">
<Image Width="280" Height="200" VerticalAlignment="Center" Stretch="UniformToFill" Source="Assets/no_image.png" />
<Image Width="280" Height="200" VerticalAlignment="Center" Stretch="UniformToFill" Source="{Binding saison.serie.poster}" />
</Grid>
<Image Source="Assets/Ban-1hh.png" Width="280" Height="59" Margin="0,-19,0,0"/>
<Grid Margin="0,-40,0,0" Height="40">
<StackPanel HorizontalAlignment="Left" Orientation="Vertical" VerticalAlignment="Center" Margin="0,-7,0,0">
<TextBlock HorizontalAlignment="Left" Margin="5,0,0,0" Width="190" TextTrimming="WordEllipsis" Foreground="White" FontSize="20" Text="{Binding saison.serie.nom}" />
<TextBlock HorizontalAlignment="Left" Margin="5,-5,0,0" Width="190" TextTrimming="WordEllipsis" Foreground="White" FontSize="13" Text="{Binding date}" />
</StackPanel>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Right" Orientation="Vertical" Margin="0,-5,5,0">
<StackPanel Orientation="Horizontal" FlowDirection="RightToLeft">
<TextBlock Foreground="#f0ec45" FontSize="14" Text="{Binding saison.number}" />
<TextBlock Foreground="#f0ec45" FontSize="14" Margin="5,0,0,0" Text="Saison " />
</StackPanel>
<StackPanel Orientation="Horizontal" FlowDirection="RightToLeft" Margin="0,-5,0,0">
<TextBlock Foreground="#f0ec45" FontSize="14" Text="{Binding ep_number}" />
<TextBlock Foreground="#f0ec45" FontSize="14" Margin="5,0,0,0" Text="Episode " />
</StackPanel>
</StackPanel>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Background="LightGray" >
<TextBlock Text="{Binding Key, Converter={StaticResource StringFormatConverter}, ConverterParameter='{}{0:dddd dd MMM yy}'}" Foreground="Black" Margin="10"
Style="{StaticResource PageSubheaderTextStyle}" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
Add a ItemsPanelTemplate (if you take a look at the default GridApp and the GroupedItemsPage.xaml, you'll see this is how they do it).
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
If you want the 3rd element in a column to leak over the bottom, then you can set a negative bottom margin on the GridView itself.
You virtually erased the GridView control template, so no wonder it doesn't work. Remove the following part and things might get back to normal:
<GridView.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</GridView.Template>
If there is something you want changed in the default template - change that specific thing. The default template has a horizontal ScrollViewer which limits vertical space use by the WrapGrid that is used for its ItemsPanelTemplate and allows items to wrap to next column, while also allowing to scroll horizontally to see all items.
I would like to present a summary list side by side, so I created a small ItemsControl to achieve that goal:
<ItemsControl x:Name="GRS">
<ItemsControl.Template>
<ControlTemplate>
<StackPanel Orientation="Horizontal" Margin="10">
<StackPanel Orientation="Vertical">
<TextBlock Text="Round" FontSize="20" />
<TextBlock Text="Food" FontSize="20" />
<TextBlock Text="Harvest" FontSize="20" />
<TextBlock Text="State" FontSize="20" />
<TextBlock Text="Private" FontSize="20" />
<TextBlock Text="Value" FontSize="20" />
<TextBlock Text="Type" FontSize="20" />
</StackPanel>
<ItemsPresenter />
</StackPanel>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Margin="10" BorderBrush="Black" BorderThickness="2">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Path=RoundNumber}" FontSize="20" />
<TextBlock Text="{Binding Path=PlayerAndModusSetting.FoodCost}" FontSize="20" />
<CheckBox IsChecked="{Binding Path=IsHarvest}" FontSize="20" />
<TextBlock Text="{Binding Path=PlayerAndModusSetting.StateBuildProject}" FontSize="20" />
<TextBlock Text="{Binding Path=PlayerAndModusSetting.PrivateBuildProject}" FontSize="20" />
<TextBlock Text="{Binding Path=Value}" FontSize="20" />
<TextBlock Text="{Binding Path=ShipType}" FontSize="20" />
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
When I set the ItemsSource & run, the result is the lists orientated vertically instead of horizontally.
As you can see, the first one is side by sidem but after that, it continues downwards, and I can't tell why.
Thanks.
The parent control of your Item Template is a StackPanel - each item is a StackPanel, contained within a StackPanel - you need to change the container around your ItemsPresenter to WrapPanel if you want it to tile horizontally.
Example:
</StackPanel>
<WrapPanel>
<ItemsPresenter />
</WrapPanel>
</StackPanel>