WPF Move text "outside" the boundaries of its own element - wpf

I am making a LinearGauge control with an ItemsControl. I would like to show the boundaries labels exactly at the center of two bars. I'll try to depict my problem in the screenshot below:
Thus, the labels should all move a few pixels to the right. But the problem of course is, is that the element boundaries are where the next colored bar starts. So I want to move the label "while ignoring the element boundaries".
Is there an easy trick to do something like that?
The xaml I have so far:
<ItemsControl
Grid.Row="0"
Grid.Column="0"
ItemsSource="{Binding Elements}">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type local:HorizontalGaugeElement}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle
Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"
Height="30"
Fill="{Binding Color}">
<Rectangle.Width>
<MultiBinding Converter="{StaticResource BoundsToWidthConverter}">
<Binding Path="Lower"/>
<Binding Path="Upper"/>
<Binding RelativeSource="{RelativeSource AncestorType={x:Type ItemsControl}}" Path="DataContext.ValueToPercentage"/>
<Binding RelativeSource="{RelativeSource AncestorType={x:Type ItemsControl}}" Path="DataContext.GaugeSize"/>
</MultiBinding>
</Rectangle.Width>
</Rectangle>
<TextBlock
Visibility="{Binding ShowLowerBoundary, Converter={StaticResource BooleanToVisibilityConverter}}"
Grid.Row="1" Grid.Column="0"
Text="{Binding Lower}"
Margin="5, 0, 0, 0">
</TextBlock>
<TextBlock
Grid.Row="1" Grid.Column="2"
Text="{Binding Upper}" TextAlignment="Right"
Margin="0, 0, 0, 0">
</TextBlock>
</Grid>
</DataTemplate>
<DataTemplate DataType="{x:Type local:VerticalGaugeElement}">
<!-- similar story but then vertical -->
</DataTemplate>
</ItemsControl.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="{Binding IsHorizontal, Converter={StaticResource BoolToOrientationConverter}}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>

Related

How to center UserControl in a TabControl

My MainWindow is built with TabContol containing in each tab UserControl in xaml files. Opening specific UserControl is not a problem, but aligning it is. I was able to horizontally center content of tab but struggle to vertically do this same. I found out that the root problem is that UserControl don't take the whole free space (height) in the Tab. I tried to make main grid VerticalAlignment="Stretch" and "Center" but that didn't help. I could use margin with specific number or define row fixed hight but that will not work on every resolution and I don't want to write method in code behind but use the power of xaml. How can I force UserControl to take whole height in Tab and then vertically center it (it's important to do it for specific UserControl because others should have default position)?
ps. I'm using MetroWindow from MahApps.Metro.
MainWindow main Grid:
<Grid>
<StackPanel>
<TabControl ItemsSource="{Binding Tabs}"
SelectedIndex="0">
<TabControl.Resources>
<Style TargetType="{x:Type TabPanel}">
<Setter Property="HorizontalAlignment"
Value="Center" />
</Style>
<DataTemplate DataType="{x:Type VMod:LoginViewModel}">
<Pages:LoginView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:AdminViewModel}">
<Pages:AdminView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:ProductsViewModel}">
<Pages:ProductsView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:DistributionViewModel}">
<Pages:DistributionView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:SummaryViewModel}">
<Pages:SummaryView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:SettingsViewModel}">
<Pages:SettingsView />
</DataTemplate>
</TabControl.Resources>
<TabControl.ItemTemplate>
<DataTemplate DataType="{x:Type inter:ITab}">
<TextBlock>
<Run Text="{Binding TabName}" />
</TextBlock>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
</StackPanel>
</Grid>
UserControl main Grid:
<Grid Background="LightBlue"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Height="300"
Width="300"
Grid.Row="2"
BorderBrush="LightGray"
BorderThickness="1">
<StackPanel HorizontalAlignment="Center">
<iconPacks:PackIconRPGAwesome Kind="Honeycomb"
HorizontalAlignment="Center"
Width="60"
Height="60"
Margin="0, 0, 0, 0"/>
<TextBlock HorizontalAlignment="Center"
Text="DistributionTool"
FontSize="20"
FontWeight="Bold"
Margin="5" />
<Grid Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
Margin="5"
TextAlignment="Left"
FontSize="15"/>
<iconPacks:PackIconMaterial Grid.Column="1"
Kind="AccountTie"
Width="20"
Height="20"
VerticalAlignment="Center"/>
</Grid>
<Grid Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<PasswordBox Grid.Column="0"
Margin="5"
HorizontalContentAlignment="Left"
FontSize="15"
Style="{StaticResource Win8MetroPasswordBox}" />
<iconPacks:PackIconMaterial Grid.Column="1"
Kind="Key"
Width="20"
Height="20"
VerticalAlignment="Center" />
</Grid>
<Button Content="LOGIN"
Width="80"
metro:ControlsHelper.ContentCharacterCasing="Normal"
Margin="5"
Style="{StaticResource AccentedSquareButtonStyle}" />
</StackPanel>
</Border>
</Grid>
From what I gather, what you could try would be:
Remove the StackPanel in your MainWindow Grid. Unless you intend to have more than 1 child inside the stack panel (Other than your TabControl), it is useless.
Add VerticalAlignement="Stretch" to your TabControl. This will allow it to take up all the space it can vertically.
Then you should be pretty much set to go.
The reason why you shouldn't use a StackPanel unless you intend to stack items inside, as in
<StackPanel>
<Child1/>
<Child2/>
</StackPanel>
is that the StackPanel.Orientation property affects how things will appear inside, including the Alignement of each child.
So Orientation="Vertical" (the default), affects the VerticalAlignement of its children. Same idea with Horizontal.

TextBlock TextWrapping not wrapping #2

OK... so this solution doesn't help
XAML is here
<ListBox ItemsSource="{Binding Path=ContentItems}" Background="White" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="2" Height="Auto" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Label VerticalAlignment="Center" Margin="0,0,0,5">Start</Label><svl:TimeEditor Value="{Binding Path=FormatedStart}" Width="87" HorizontalAlignment="Left" Margin="2,8" Name="dtpStart" FontSize="12" Height="25" VerticalAlignment="Center" />
<Label VerticalAlignment="Center" Margin="0,0,0,5">End</Label><svl:TimeEditor Value="{Binding Path=FormatedEnd}" Width="87" HorizontalAlignment="Left" Margin="2,8" Name="dtpEnd" FontSize="12" Height="25" VerticalAlignment="Center" />
</StackPanel>
<TextBlock Grid.Row="1" TextWrapping="Wrap" Name="tbText" Text="{Binding Path=Data}"></TextBlock>
</Grid>
<Grid Grid.Column="1" Visibility="Collapsed">
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The following will helps for text wrapping:
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
Well your TextBlock does not need to wrap since your specifying Width as Auto for it's ColumnDefinition which allows it to take all the Width it needs to fit Content even at the cost of overflowing. You either need to set the Column's Width to "*" to allow the TextWrapping to kick in when requested width exceeds allowable or manually force a MaxWidth on it using a Binding like
<TextBlock Name="tbText" Grid.Row="1" MaxWidth="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualWidth}" Text="{Binding Path=Data}" TextWrapping="Wrap" />

WPF - Lost ability to input date via keyboard?

I have a WPF user control that makes use of a ComboBox to contain a DatePicker. Unfortunately, when I put the DatePicker into the ComboBox, I seem to lose the ability to enter the date through the keyboard; only the Calendar and mouse work.
Any ideas?
Also, here's my XAML:
<ComboBox Name="cboCombo" IsReadOnly="True" IsEditable="True" Foreground="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type UserControl}},Path=Foreground}" DropDownOpened="cboCombo_DropDownOpened" DropDownClosed="cboCombo_DropDownClosed">
<ComboBox.Text>
<MultiBinding Converter="{StaticResource DateTimeTextConverter}" Mode="OneWay">
<Binding RelativeSource="{RelativeSource FindAncestor,AncestorType={x:Type UserControl}}" Path="SelectedDateAndTime" Mode="OneWay" />
<Binding RelativeSource="{RelativeSource FindAncestor,AncestorType={x:Type UserControl}}" Path="ShowTime" />
</MultiBinding>
</ComboBox.Text>
<ComboBoxItem IsSelected="True">
<ComboBoxItem.Template>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<DatePicker Grid.Row="0" Grid.Column="0" SelectedDate="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type UserControl}},Path=SelectedDateAndTime}" SelectedDateChanged="BCDatePicker_SelectedDateChanged" />
<controls:TimePicker Grid.Row="0" Grid.Column="1" MouseUp="TimePicker_MouseUp" Loaded="TimePicker_Loaded" Time="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type UserControl}},Path=SelectedDateAndTime,Mode=OneWay}" Visibility="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type UserControl}},Path=ShowTime, Converter={StaticResource VisibilityConverter}}" />
<Button Grid.Row="1" Grid.Column="0" Content="Today" Click="Button_Click" />
<Button Grid.Row="1" Grid.Column="1" Content="Clear" Click="Button_Click_1" />
<Button Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Content="View Date Calculator" Click="Button_Click_2" Visibility="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type UserControl}},Path=ShowDateCalculator,Mode=OneWay,Converter={StaticResource VisibilityConverter}}" />
<Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Content="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type UserControl}},Path=SelectedDateAndTime,Mode=OneWay,Converter={StaticResource HolidayDateConverter}}" Foreground="Red" />
</Grid>
</ControlTemplate>
</ComboBoxItem.Template>
</ComboBoxItem>
</ComboBox>
I would try mode=twoway and make sure there is a get set on the property and take off the event. I understand you want the event but if the event is is breaking it then at least you know the event is breaking it. And you can trace and see if set if fired. I am with the other comments - why do you want to do this?

WPF Stretch ListBox Height 100% of Grid.Row?

I'm attempting to stretch the height of a ListBox 100% of the height of the parent grid (i.e. 90% of the height of the parent view); even if the listboxes are empty. I should note that VerticalAlignment="Stretch" doesn't seem to work, so I've removed it from the ListBox and StackPanel elements. As of now, the ListBox only stretches as far as it needs to in order to accommodate the number of items it contains. I understand that the row definitions should work but if both lists are empty, they both shrink to a few pixels tall (along with the grid rows). Could something cause these rows to shrink despite the explicit height declaration?
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".24*"/>
<ColumnDefinition Width=".73*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=".9*"/>
<RowDefinition Height=".1*"/>
</Grid.RowDefinitions>
<ListBox Grid.Column="0" Grid.Row="0" Name="Subdivisions" SelectedItem="{Binding SelectedSubdivisionViewModel}" ItemsSource="{Binding Path=Subdivisions}" Grid.IsSharedSizeScope="True">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Border BorderBrush="#FF4788c8" BorderThickness="1,1,1,1" CornerRadius="8,8,8,8">
<Expander IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}">
<Expander.Header>
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" SharedSizeGroup="col1" />
<ColumnDefinition Width=".1*" SharedSizeGroup="col2" />
<ColumnDefinition Width="*" SharedSizeGroup="col3" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0">
<TextBlock.Text>
<MultiBinding StringFormat="Name: {0}">
<Binding Path="SubdivisionName" />
<Binding Path="SubdivisionID" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="0">
<TextBlock.Text>
<MultiBinding StringFormat="ID: {0}">
<Binding Path="SubdivisionName" />
<Binding Path="SubdivisionID" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="1">
<TextBlock.Text>
<MultiBinding StringFormat="ID: {0}">
<Binding Path="SubdivisionName" />
<Binding Path="SubdivisionID" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</Grid>
</StackPanel>
</Expander.Header>
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="{Binding ElementName=SubdivisionID}" />
<TextBlock Text="{Binding Path=SubdivisionID}" />
</Grid>
</StackPanel>
</Expander>
</Border>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I was able to achieve the desired height by binding the ListBox height property to the ActualHeight of the LayoutRoot Grid via the XAML below:
<Grid x:Name="LayoutRoot" Background="LightGray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".24*"/>
<ColumnDefinition Width=".73*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=".9*"/>
<RowDefinition Height=".1*"/>
</Grid.RowDefinitions>
<ListBox Name="Subdivisions" SelectedItem="{Binding SelectedSubdivisionViewModel}" ItemsSource="{Binding Path=Subdivisions}" Grid.IsSharedSizeScope="True" Height="{Binding ElementName=LayoutRoot, Path=ActualHeight}" >
The important bit being:
Height="{Binding ElementName=LayoutRoot, Path=ActualHeight}"
Also achievable via ancestor type:
Height="{Binding Path=ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}"
The stackpanels make it compress. Remove it and it'll fill the full height
The code you've posted does exactly what the parent grid's row height definition has declared: take up 90% of the available height.
*.1 = 10% of height
*.9 = 90% of the height
Often times its useful to remove the clutter from the xaml and start with something simple to help with the layout. Here's a sample with your code's Grid column/row definition's, but with less clutter and some background color to show the entire ListBox.
The first ListBox has several items, while the 2nd ListBox only has a few items.
Both ListBoxes are in the first row and fill 90% of the available space.
The 2nd Row contains a grid that fills the rest of the space; you can see that it takes up 10% of the available space.
Note that the first ListBox doesn't declare a Column or Row index; when no index is used, it is assumed to be 0, i.e., Grid.Row="0" Grid.Column=0.
<Grid Background="Red">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".24*"/>
<ColumnDefinition Width=".73*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=".9*"/>
<RowDefinition Height=".1*"/>
</Grid.RowDefinitions>
<ListBox Background="LightGray"
ItemsSource="{x:Static Fonts.SystemFontFamilies}"/>
<ListBox Grid.Column="1" Grid.Row="0" Background="LightSlateGray">
<ListBoxItem>John</ListBoxItem>
<ListBoxItem>Jane</ListBoxItem>
<ListBoxItem>Fido</ListBoxItem>
</ListBox>
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Background="Tomato" />
</Grid>

How to limit column height to another one's?

I have a grid in WPF which is made of 4 rows along 2 columns where column 1 holds an Image control and column 2 holds 4 Textblocks. Problem is, the Image control sizes itself to the Image size and extends the listbox's entry too much [Its in a DataTemplate] and makes everything look distorted. I dont want to manually set a max height/width because i want the Image to size itself to the size of the 4 textblocks that are alongside it. Any ideas?
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="{Binding Logo, Converter={StaticResource BSConverter}}" Grid.Row="0" Grid.RowSpan="4"
Grid.Column="0" Stretch="Uniform" SnapsToDevicePixels="True"/>
<TextBlock Text="{Binding Name}" Grid.Row="0" Grid.Column="1"/>
<TextBlock Text="{Binding Author}" Grid.Row="1" Grid.Column="1"/>
<TextBlock Text="{Binding Version}" Grid.Row="2" Grid.Column="1"/>
<TextBlock Text="{Binding Description}" Grid.Row="3" Grid.Column="1"/>
</Grid>
</DataTemplate>
Thanks in advance
You can use Grid.IsSharedSizeGroup on the Parent ListBox to make sure all of your items get the same Width for the first Column like this
<ListBox ...
Grid.IsSharedSizeScope="True">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="GroupA"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
...
For the Image height problem, you could bind Height to the ActualHeight of the Parent Grid with a FallbackValue of 1.0 (to ensure the Height of the Image doesn't effect the Height of the Grid)
<Image Source="{Binding Logo, Converter={StaticResource BSConverter}}"
Grid.Row="0"
Grid.RowSpan="4"
Grid.Column="0"
Stretch="Uniform" SnapsToDevicePixels="True"
Height="{Binding RelativeSource={RelativeSource AncestorType=Grid},
Path=ActualHeight,
FallbackValue=1.0}"/>
Modifying your containers slightly to make use of a StackPanel in conjunction with a Grid and referencing the StackPanel via ElementName binding should provide you the visuals you are looking for...
<DataTemplate>
<Grid HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,8,0" Source="{Binding Logo, Converter={StaticResource BSConverter}}"
Grid.Column="0" Stretch="Uniform" SnapsToDevicePixels="True"
Height="{Binding ElementName=Contents, Path=ActualHeight}"/>
<StackPanel VerticalAlignment="Top" Name="Contents" Grid.Column="1" Orientation="Vertical">
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding Author}"/>
<TextBlock Text="{Binding Version}"/>
<TextBlock Text="{Binding Description}"/>
</StackPanel>
</Grid>
</DataTemplate>

Resources