I am wanting the position of the item in list to appear to left of the description but for some reason its making my font messed up and placing it in the center as shown in image. I am just wanting to mimic the same image I have on the map so it coresponds to listview poistion.
<DataTemplate x:Key="ImageTextListInboxTemplate">
<StackPanel Orientation="Horizontal" Width="470" Height="85">
<Border Height="40" Width="40" Margin="10,10,0,10" VerticalAlignment="Top">
<Image Source="/SampleImage.png" Stretch="UniformToFill"/>
</Border>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="0,10,0,0">
<Grid Width="40" Height="40">
<Ellipse Fill="Blue" StrokeThickness="3"/>
<TextBlock Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding _position}"/>
</Grid>
<TextBlock Text="" FontSize="20" FontWeight="Semilight"
Margin="10,0,0,0" Width="320" Height="26" TextTrimming="WordEllipsis"
HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text="{Binding _Name}" FontSize="20" FontWeight="Semilight"
Margin="10,0,0,0" Width="320" Height="26" TextTrimming="WordEllipsis"
HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text="{Binding _Postcode}"
Margin="10,2,0,0" Width="320" TextTrimming="WordEllipsis" TextWrapping="Wrap"
HorizontalAlignment="Left"/>
<TextBlock Text="Sed varius rhoncus metus, et condimentum"
Margin="10,2,0,0" Width="320" TextTrimming="WordEllipsis" TextWrapping="Wrap"
HorizontalAlignment="Left"/>
</StackPanel>
<TextBlock Text="00:00 AM" FontSize="9" Margin="20,0,0,0" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
With Circle as above
Without circle by just removing the following code
<Grid Width="40" Height="40">
<Ellipse Fill="Blue" StrokeThickness="3"/>
<TextBlock Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding _position}"/>
</Grid>
Your containing stack panel is fixed at Height="85". Because it's a vertical stack panel it will add items to the control vertically, so you're specifying:
a StackPanel with a 10 top margin;
a Grid of height 40;
an empty TextBlock of height 26;
leaving 9 pixels for your _Name TextBlock, hence the clipping of the TextBlock and everything under it you're seeing there.
There's a number of ways you could get your ellipse grid to the left of one of the text boxes, I would probably consider wrapping a grid around the textblock you want it to be displayed to the left of like this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Width="40" Height="40" HorizontalAlignment="Left">
<Ellipse Fill="Blue" StrokeThickness="3"/>
<TextBlock Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding _position}"/>
</Grid>
<TextBlock Grid.Column="1" Text="Sed varius rhoncus metus, et condimentum"
Margin="10,2,0,0" Width="320" TextTrimming="WordEllipsis" TextWrapping="Wrap"
HorizontalAlignment="Left"/>
</Grid>
Related
I have below WPF TextBlock within a border:
<Border Visibility="{Binding Path=BlinkOn, Converter={StaticResource BoolToVis}}" BorderThickness="1" BorderBrush="Red" CornerRadius="5" Margin="5">
<TextBlock x:Name="lblStoryboard"
TextAlignment="Center"
Padding="5"
Width="Auto"
Background="Red"
Foreground="Black"
FontSize="12.5"
FontWeight="Bold"
Style="{StaticResource BlinkingTextBlock}"
Text="Hi there!"
TextWrapping="WrapWithOverflow"
Visibility="{Binding Path=BlinkOn, Converter={StaticResource BoolToVis}}">
</TextBlock>
</Border>
Now I am trying to insert an inline image in front of the Textblock text, I mean, to the left (left side) of the TextBlock text and in the same line. How can I do this?
Add Stackpanel with Horizontal Orientation.
I have removed the binding since it as nothing to do with Adding image.
<Border BorderThickness="1" BorderBrush="Red" CornerRadius="5" Margin="5">
<StackPanel Orientation="Horizontal" Margin="0,0,0,-1">
<Image Source="C:\Users\Administrator\source\repos\WpfApp4\WpfApp4\Koala.jpg" Margin="0,459,0,0" />
<TextBlock x:Name="lblStoryboard"
HorizontalAlignment="Center"
TextAlignment="Center"
Padding="5"
Width="Auto"
Background="Red"
Foreground="Black"
FontSize="12.5"
FontWeight="Bold"
Text="Hi there!"
TextWrapping="WrapWithOverflow" Margin="0,459,0,0"
/>
</StackPanel>
</Border>
I'm using the Material Design in a WPF XAML application, I've got this section of code bellow, when the grid is outside of a "materialDesign:Flipper" it all renders correctly; ie- it grows/stretch's correctly with the size of the window and it stacks nicely inside of the StackPanel.
However, as soon as I place this code inside of a Flipper, the scaling and positioning becomes skewed. If I start to change the size of the window it will resize funnily and will not stack nicely. Please see both the image and video bellow for more info. Thank you.
Please note all this code is contained within side a "StackPanel", the intention is such that they can be copied and pasted multiple times.
Working Code outside a Flipper:
<Grid Height="89">
<Grid Width="77" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="7,3,0,2" Panel.ZIndex="2" Height="84">
<Ellipse Fill="{Binding Colour}" HorizontalAlignment="Left" Height="77" StrokeThickness="3" Stroke="#FF464646" Width="77" Effect="{DynamicResource MaterialDesignShadowDepth2}" />
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Width="90" FontSize="{Binding FontSize}" Foreground="White" />
</Grid>
<UniformGrid Rows="2" Columns="1" Panel.ZIndex="3" Margin="89,18,72,0">
<TextBox TextWrapping="Wrap" Text="{Binding BrandName}" FontSize="24" Grid.ColumnSpan="1"/>
<Label Content="Brand Name" Grid.ColumnSpan="1" Grid.RowSpan="2" Margin="-2,-3,2,3"/>
</UniformGrid>
<Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" HorizontalAlignment="Right" Panel.ZIndex="4" Content="{materialDesign:PackIcon DotsHorizontal}" Command="{x:Static materialDesign:Flipper.FlipCommand}" Margin="0,25,19,24"/>
<materialDesign:Card Margin="24,0,5,5" VerticalAlignment="Bottom" Height="72" Panel.ZIndex="-1" />
</Grid>
Broken Code, inside a Flipper:
<materialDesign:Flipper Visibility="{Binding IsVisible}" Background="#FFE89595" HorizontalAlignment="Stretch">
<materialDesign:Flipper.FrontContent>
Grid Height="89">
<Grid Width="77" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="7,3,0,2" Panel.ZIndex="2" Height="84">
<Ellipse Fill="{Binding Colour}" HorizontalAlignment="Left" Height="77" StrokeThickness="3" Stroke="#FF464646" Width="77" Effect="{DynamicResource MaterialDesignShadowDepth2}" />
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Width="90" FontSize="{Binding FontSize}" Foreground="White" />
</Grid>
<UniformGrid Rows="2" Columns="1" Panel.ZIndex="3" Margin="89,18,72,0">
<TextBox TextWrapping="Wrap" Text="{Binding BrandName}" FontSize="24" Grid.ColumnSpan="1"/>
<Label Content="Brand Name" Grid.ColumnSpan="1" Grid.RowSpan="2" Margin="-2,-3,2,3"/>
</UniformGrid>
<Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" HorizontalAlignment="Right" Panel.ZIndex="4" Content="{materialDesign:PackIcon DotsHorizontal}" Command="{x:Static materialDesign:Flipper.FlipCommand}" Margin="0,25,19,24"/>
<materialDesign:Card Margin="24,0,5,5" VerticalAlignment="Bottom" Height="72" Panel.ZIndex="-1" />
</Grid>
</materialDesign:Flipper.FrontContent>
<materialDesign:Flipper.BackContent>
<Grid Height="200" Background="{Binding BackColour}">
<Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" Content="{materialDesign:PackIcon DotsHorizontal}" Command="{x:Static materialDesign:Flipper.FlipCommand}"/>
</Grid>
</materialDesign:Flipper.BackContent>
</materialDesign:Flipper>
Example Image of render
YouTube Video Demonstration - The one highlighted in red is flipper.
Thank you for any help.
What are the panels and containers that allow overlapping with varying z-index ? (escluding Canvas)
--Since I was asked for details this is part of the code:
<DockPanel HorizontalAlignment="Left" Height="32" LastChildFill="False" Margin="10,0,0,10"
VerticalAlignment="Top">
<Rectangle Fill="{Binding (extensions:PaletteColor.FillBrush)}" Height="32" RadiusY="4"
RadiusX="4"
Stroke="#FF000000" Width="32" HorizontalAlignment="Left" VerticalAlignment="Top"
MouseLeftButtonUp="TargetColorClick"
ToolTip="{Binding (extensions:PaletteColor.Name)}" />
Ok I was able to do this with Clemens support:
<TextBlock TextWrapping="Wrap" Text="16"
Margin="-32,0,0,0" Height="16"
HorizontalAlignment="Center" />
--Answering to another question my XAML for whole control looks like this:
<ItemsControl ItemsSource="{Binding (local:MainWindow.CurrentPaletteSet)}" Width="400" Margin="665,67,14,-67">
<ItemsControl.ItemTemplate>
<DataTemplate>
<DockPanel HorizontalAlignment="Left" Height="32" LastChildFill="False" Margin="10,0,0,10"
VerticalAlignment="Top">
<Rectangle Fill="{Binding (extensions:PaletteColor.FillBrush)}" Height="32" RadiusY="4"
RadiusX="4"
Stroke="#FF000000" Width="32" HorizontalAlignment="Left" VerticalAlignment="Top"
MouseLeftButtonUp="TargetColorClick"
ToolTip="{Binding (extensions:PaletteColor.Name)}" />
<TextBlock TextWrapping="Wrap" Text="16"
Margin="-32,0,0,0" Height="16"
HorizontalAlignment="Center" />
<TextBlock TextWrapping="Wrap" Text="{Binding (extensions:PaletteColor.FullRgbString)}"
Margin="5,0,0,0" Height="16"
HorizontalAlignment="Left" DockPanel.Dock="Top" />
<TextBlock TextWrapping="Wrap" Text="{Binding (extensions:PaletteColor.FullHslString)}"
Margin="5,0,0,0"
Height="16" HorizontalAlignment="Left" DockPanel.Dock="Top" MinWidth="121" />
</DockPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel></ItemsControl>
I have a listBox with a checkbox with inside a textblock:
<ListBox x:Name="lbxtgbTab3" FontSize="{StaticResource BUTTON_FONTSIZE}" HorizontalContentAlignment="Stretch" Background="{x:Null}" BorderBrush="{x:Null}" FontWeight="Bold">
<ToggleButton Name="tgb4Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Click="ToggleButton_Click" Padding="0" FontWeight="Bold">
<TextBlock Name="otb4Tab3" Text="4 - GESTIONE P.P." Margin="0" Background="Red" TextAlignment="Center" TextWrapping="Wrap"/>
</ToggleButton>
now the problem is that it doesn't wrap as you can see in the picture
--EDIT--
I have changed it like that
<ToggleButton Name="tgb4Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" HorizontalAlignment="Left" Width="175" Padding="0" BorderBrush="Gainsboro" BorderThickness="3" IsChecked="false" Click="ToggleButton_Click" FontWeight="Bold" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Margin="0">
<TextBlock Name="otb4Tab3" Text="4 - GESTIONE P.P." Margin="0" Fill="White" TextAlignment="Center" TextWrapping="Wrap" />
</ToggleButton>
but no change
One solution can be to specify the width of the ListBox or the width of the ToggleButton. If you don't specify the size whey will think they have infinite space to grow. Maybe if you show a complete example of the XAML can be easier to answer.
One solución could be:
<ListBox x:Name="lbxtgbTab3" FontSize="{StaticResource BUTTON_FONTSIZE}" HorizontalContentAlignment="Stretch" Background="{x:Null}" BorderBrush="{x:Null}" FontWeight="Bold">
<ToggleButton Name="tgb4Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Click="ToggleButton_Click" Padding="0" FontWeight="Bold">
<TextBlock Name="otb4Tab3" Text="4 - GESTIONE P.P." Margin="0" Background="Red" TextAlignment="Center" TextWrapping="Wrap"/>
</ToggleButton>
</ListBox>
I have this grid in my Page and i have a problem that in landscape mode it rotate and the textbox and the button are stuck in the center and not stretch,any idea how to fix it?
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0" >
<StackPanel Orientation="Vertical" Margin="0,0,0,0" Width="480">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center">
<TextBox Name="searchTextBox" Height="72" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Margin="10,0,0,0" TextChanged="SearchTextDidChange" HorizontalContentAlignment="Left" VerticalContentAlignment="Top" Width="349" HorizontalAlignment="Left"/>
<Button Content="Search" Margin="0,-3,0,0" VerticalAlignment="Top" Height="77" Click="DidPressSearchButton" HorizontalContentAlignment="Right" VerticalContentAlignment="Top" Padding="14,5,10,6" HorizontalAlignment="Right"/>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
It is because you use stackpanel, use only the grid instead and set the column definition like this!
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="130" />
</Grid.ColumnDefinitions>
<TextBox Name="searchTextBox"
Grid.Column="0"
Height="72"
TextWrapping="Wrap"
Text=""
VerticalAlignment="Top"
Margin="10,0,0,0"
TextChanged="SearchTextDidChange"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Top"
/>
<Button Content="Search"
Grid.Column="1"
Margin="0,-3,0,0"
VerticalAlignment="Top"
Height="77"
Click="DidPressSearchButton"
HorizontalContentAlignment="Right"
VerticalContentAlignment="Top"
Padding="14,5,10,6"
HorizontalAlignment="Right" />
</Grid>
First remove the Width="480" attribute from the first StackPanel. Also remove the Width="349" attribute from the TextBox element.
That should allow the elements to stretch on landscape mode.