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>
Related
I have this expander control with WrapPanel in it:
<Expander Background="Black">
<Expander.Header>
<BulletDecorator>
<BulletDecorator.Bullet>
<Image Source="../Images/Button/customiseButton_Transparent.png" Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
</BulletDecorator.Bullet>
<TextBlock Margin="10,0,0,0" Text="Customize" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
</BulletDecorator>
</Expander.Header>
<WrapPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Images/Button.png" />
<Label Content="Phone" Foreground="Snow" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Images/Button.png" />
<Label Content="Colour" Foreground="Snow" VerticalAlignment="Center"/>
</StackPanel>
</WrapPanel>
</Expander>
I need a to display a white separator between the two stack panels.
I have tried adding the <Seperator/> tag, but it does not work
A Separator is nothing more than a Border element really so this should work just fine:
<WrapPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Images/Button.png" />
<Label Content="Phone" Foreground="Snow" VerticalAlignment="Center"/>
</StackPanel>
<Border Width="2" Background="Red" />
<StackPanel Orientation="Horizontal">
<Image Source="Images/Button.png" />
<Label Content="Colour" Foreground="Snow" VerticalAlignment="Center"/>
</StackPanel>
</WrapPanel>
Just change the Width and Background properties of the Border according to your requirements.
The actual Separator element always has a Height of 1 on Windows 10 unless you modify its ControlTemplate.
Use this Tag:
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />
In my ContentDialog. On focus any element, type TextBox, the keyboard appear. When Keyboard appear, have a big margin above( so 20-30 px maybe). This space is the same height of the space allocated for Primary and Secondary Buttons. If have this margin, my content have a scrollbar and I do not want it. I have space sufficient to show all content of my dialog if remove this margin/padding of course.
This topic is related with: ContentDialog Windows 10 Mobile XAML - FullScreen - Padding
<StackPanel Orientation="Horizontal">
<TextBox x:Name="txtUser" IsSpellCheckEnabled="False"
Background="Black" Foreground="Red BorderBrush="Red" BorderThickness="1"
PlaceholderText="Digit your username"
GotFocus="txtUser_GotFocus" Style="{StaticResource TextBoxStyle}"
TextChanged="txtUser_TextChanged"
/>
<Button x:Name="MakeOff"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton x:Name="btnRegisterTwo"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button x:Name="MakeOffThree"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
</StackPanel>
</Grid>
Someone help to remove this?
Thanks
Interestingly, the ContentScrollViewer inside the style is given a fixed height during run-time, and a hack is to remove this x:Name from the ScrollViewer.
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" ZoomMode="Disabled" Margin="{ThemeResource ContentDialogContentScrollViewerMargin}" IsTabStop="False">
Also, you will need to add the RowDefinitions back to the root panel LayoutRoot in the style.
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
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>
I created a custom header for my GroupBox like the following image:
I want also to set a Binding on the Backgroud of this header, so I wrote the following code:
<GroupBox Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
Background="{Binding HColor}">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Border BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding HColor}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</GroupBox.HeaderTemplate>
</GroupBox>
After execution, I the GroupBox's Background is colord in the right way, but not the header !
Is anyone able to explain to me why it's not working well ?
you can use like that ;
<GroupBox Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
Background="{Binding HColor}">
<GroupBox.Header>
<Border BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding Path=HColor}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</GroupBox.Header>
<!--<DataTemplate>
<Border BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding Path=HColor}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>-->
</GroupBox>
Solution Found !
I had to make an internal binding in the Xaml, between the backgroud of the GroupBox and it's header. Like the followiing code:
<GroupBox Name="HubGroupBox"
Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
Background="{Binding HubColor}">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Border Canvas.ZIndex="2"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding ElementName=HubGroupBox, Path=Background}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</GroupBox.HeaderTemplate>
</GroupBox>
The result is:
You can use this binding without element name
<GroupBox Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
Background="{Binding HColor}">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Border BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20" Background="{Binding Background, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type GroupBox}}}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</GroupBox.HeaderTemplate>
</GroupBox>
You can rely on your VM data instead of control properties
<GroupBox Name="HubGroupBox"
Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
DataSource="{Binding VMObject}">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Border Canvas.ZIndex="2"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding ElementName=HubGroupBox, Path=DataSource.HColor}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</GroupBox.HeaderTemplate>
I have a grid with 4 columns. In the first column is a Canvas with a ZIndex of 99 and inside that is an expander. The expand direction is set to RIGHT. When I click on the header, the expander expands OVER TOP of column 2...which is exactly what I want. I'm trying to replicate this (only the opposite direction) inside column 4, so that when expanded, it will show over column 3. Even though I've marked the ExpandDirection of the second expander to "Left", it still expands to the right, and off the screen.
Here is the working expander:
<Canvas Grid.Column="0" Panel.ZIndex="99" Grid.RowSpan="4" VerticalAlignment="Stretch" Margin="0,5">
<Expander ExpandDirection="Right" Style="{DynamicResource OptionsExpanderStyle}" VerticalAlignment="Stretch" Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}">
<Border BorderBrush="Black" BorderThickness="0,0,2,0">
<Grid Background="White">
</Grid>
</Border>
</Expander>
</Canvas>
Here is the broken expander:
<Canvas x:Name="rightCanvas" Panel.ZIndex="99" Grid.RowSpan="4" Grid.Column="3" Margin="0,5">
<Expander ExpandDirection="Left" Style="{DynamicResource OptionsExpanderStyle}" HorizontalAlignment="Right" VerticalAlignment="Stretch" Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}">
<Border BorderBrush="Black" BorderThickness="2,0,0,0">
<Grid Background="White" Width="150">
</Grid>
</Border>
</Expander>
</Canvas>
Do not use canvas.
Try something like that:
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Background="LightBlue"
TextAlignment="Center" Text="Left Column"/>
<TextBlock Grid.Column="1" Background="LightCoral"
TextAlignment="Center" Text="Right Column"/>
</Grid>
<Expander Background="LightGray" ExpandDirection="Right"
Header="LeftMenu" VerticalAlignment="Top" HorizontalAlignment="Left">
<StackPanel Width="200">
<TextBlock Text="Some menu stuff"/>
<TextBlock Text="Some more"/>
</StackPanel>
</Expander>
<Expander Background="LightGray" ExpandDirection="Left"
Header="RightMenu" VerticalAlignment="Top" HorizontalAlignment="Right">
<StackPanel Width="200" >
<TextBlock Text="Some menu stuff"/>
<TextBlock Text="Some more"/>
</StackPanel>
</Expander>
</Grid>