I have a TextBox defined as this:
<TextBox>
<TextBox.Background>
<VisualBrush>
<VisualBrush.Visual>
<StackPanel>
<TextBlock Background="Blue" Opacity="0.5" Text="155"/>
</StackPanel>
</VisualBrush.Visual>
</VisualBrush>
</TextBox.Background>
</TextBox>
It looks like this:
However, when I remove the Background property, the text stretches like this:
Is there any way to add the background without changing the way the text looks?
If you use Background="Transparent" it will use the same layout but with no background color. Is that what you're trying to do?
a workarround of this problem which i don't know why it occurs would be to remove Background property from textblock and put it behind it like this
<Grid>
<Rectangle Fill="Blue"/>
<TextBox Height="100">
<TextBox.Background>
<VisualBrush Stretch="Fill" TileMode="None" AlignmentX="Left" AlignmentY="Top">
<VisualBrush.Visual>
<StackPanel>
<TextBlock Margin="0" Padding="0" Opacity="0.5" Text="155"/>
</StackPanel>
</VisualBrush.Visual>
</VisualBrush>
</TextBox.Background>
</TextBox>
</Grid>
Related
Attempting to centre my label in my User Control to my 'signal' I have drawn within my canvas.
This is what my signals currently look like, with their names below the signal. As you can see, due to the variation in name length, some are off centred.
My user control XAML code:
<UserControl x:Name="LeftUserControl"
d:DesignHeight="50" d:DesignWidth="50" RenderTransformOrigin="0.84,0.5">
<Viewbox Stretch="Uniform" Width="10" Height="10">
<Canvas Height="150" Width="150">
<Label Content="{Binding SignalName, ElementName=LeftUserControl}" Foreground="Black" Canvas.Top="108" FontSize="15" Canvas.Left="85"></Label>
<Line X1="130" X2="130" Y1="105" Y2="84" Stroke="Black" StrokeThickness="5" StrokeStartLineCap="Round" ></Line>
<Line X1="130" X2="100" Y1="105" Y2="105" Stroke="Black" StrokeThickness="5"></Line>
<Ellipse Fill="Red" Width="25" Height="25" Canvas.Left="85" Canvas.Top="92"/>
</Canvas>
</Viewbox>
</UserControl>
My main window where I'm using my user control:
<DataTemplate DataType="{x:Type viewModel:SignalLeftViewModel}">
<Canvas>
<userControls:SignalLeftControl SignalName="{Binding Name}" Canvas.Top="{Binding SignalCoords.Y, Converter={StaticResource ScaleYCoordConverter},ConverterParameter=leftSignal}" Canvas.Left="{Binding SignalCoords.X, Converter={StaticResource ScaleXCoordConverter}, ConverterParameter=leftSignal}">
<userControls:SignalLeftControl.RenderTransform>
<RotateTransform Angle="{Binding Angle}"/>
</userControls:SignalLeftControl.RenderTransform>
</userControls:SignalLeftControl>
</Canvas>
</DataTemplate>
I'm wondering what the easiest way is to centre my label within my user control, so that all the names are aligned properly. Thanks in advance.
I want to create TextBox with image in it. This is what I have tried:
<DockPanel Grid.Row="1" Grid.Column="1" Margin="5" >
<Image DockPanel.Dock="Left" Source="D:\my_backup\WPF\SALIENT\SALIENT\Images\d2.PNG" Width="20" Height="20"></Image>
<TextBox Text="test" FontSize="16" HorizontalAlignment="Stretch" Background="Transparent"
</TextBox>
</DockPanel>
this gives me output like this:
but i want the image inside TextBox like this
anyone can help?
You could use this sort of implementation.
you should probably make a user control out of it.
<Border BorderBrush="Black"
BorderThickness="2"
VerticalAlignment="Center"
CornerRadius="5">
<StackPanel Margin="5"
Orientation="Horizontal">
<Image Source="C:\SourceOfTheImage\Path\Image.png"
Height="18"/>
<TextBlock Text="Hello, I am a text block!"
Margin="3 0 0 0"/>
</StackPanel>
</Border>
It looks like this for me
You can set the background property on Textbox, like this (mine is align on right) :
<TextBox x:Name="txtSearch"
Text="Search Item...">
<TextBox.Background>
<ImageBrush ImageSource="Images/Search.png" Stretch="Uniform" AlignmentX="Right">
<ImageBrush.Transform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform X="-3"/>
</TransformGroup>
</ImageBrush.Transform>
</ImageBrush>
</TextBox.Background>
</TextBox>
Set AlignmentX to left if you want to see the image on the left side. Set the TranslateTransform.X to a positive value to add a margin.
Try this:
<Border Padding="5" BorderThickness="2,2,2,2" BorderBrush="Gray" CornerRadius="2,2,2,2">
<DockPanel Grid.Row="1" Grid.Column="1" Margin="5" >
<Image DockPanel.Dock="Left" Source="D:\my_backup\WPF\SALIENT\SALIENT\Images\d2.PNG" Width="20" Height="20"></Image>
<TextBox Text="test" FontSize="16" HorizontalAlignment="Stretch" Background="Transparent" BorderBrush="Transparent" ></TextBox>
</DockPanel>
</Border>
That would be the simplest one-off way of doing it.
You could dump it in a UserControl for reuse.
A second way of achieving this would be to open up the TextBox template and put this icon of yours inside the makeup of the TextBox, which would allow you to avoid needing the DockPanel and Border here, as well as allowing you to make the Template a resource you can easily attach to any Textbox in the future.
(I'm extremely new to xaml)
<Canvas Width="200" Height="100">
<Rectangle Width="" Height=""></Rectangle>
</Canvas>
Now, is it possible to set Rectangle's Width and Height the same as Canvas's using Xaml only?
or is necessary to use code?
You should make Data Binding. Looks like this:
<Canvas Name="myCanvas" Width="200" Height="100">
<Rectangle Width="{Binding ElementName=myCanvas, Path=Width}" Height="{Binding ElementName=myCanvas, Path=Height}"> </Rectangle>
</Canvas>
I am using the MahApps Metro controls in a WPF application with their FlyOut control on the bottom of the window. I am using their MetroCircleButtonStyle button like so:
<Button Width="55"
Height="55"
VerticalAlignment="Top"
Style="{DynamicResource MetroCircleButtonStyle}">
<Rectangle Width="20"
Height="20">
<Rectangle.Fill>
<VisualBrush Stretch="Fill"
Visual="{StaticResource appbar_city}" />
</Rectangle.Fill>
</Rectangle>
</Button>
My question is how do I add Text below these icons in the flyout?
Steve
something like:
<Button Width="55"
Height="55"
VerticalAlignment="Top"
Style="{DynamicResource MetroCircleButtonStyle}">
<StackPanel Orientation="Vertical">
<Rectangle Width="20"
Height="20">
<Rectangle.Fill>
<VisualBrush Stretch="Fill"
Visual="{StaticResource appbar_city}" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="Hello" />
</StackPanel>
</Button>
Update:
MetroCircleButtonStyle by itself does not accomodate for Text outside the Ellipse. It's Template is pretty much a Grid with 1 cell and 3 children on top of each other(Ellipse, Another Ellipse and top-most is the ContentPresenter). Text inside does not actually respond to any state change either, So text outside with this Style is as good as wrapping the Button without text with a TextBlock in say a StackPanel.
What you're looking for, you could use the AppBarButton. Do note the documentation states, Due to issues with this control, AppBarButton is due to be removed for v1.0 so use that as an example and build up your own control with a similar Style. Probably drop the ViewBox, if your Button sizes are fixed.
From Viv's answer, you can add margin on the textbox element to push the label down:
<Button Width="55"
Height="55"
VerticalAlignment="Top"
Style="{DynamicResource MetroCircleButtonStyle}">
<StackPanel Orientation="Vertical">
<Rectangle Width="20"
Height="20">
<Rectangle.Fill>
<VisualBrush Stretch="Fill"
Visual="{StaticResource appbar_city}" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="Hello" Margin="0, 20, 0, 0" />
</StackPanel>
</Button>
I have a textbox and a rectangle. The rectangle updates itself when textbox content changes. I'm painting the rectangle fill with visual brush. The problem is that the visual brush don't match the textbox's actual look. What should I do. Here's my code:
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBox Name="txtBox"/>
<Rectangle Height="{Binding ElementName=txtBox, Path=ActualHeight}"
Width="{Binding ElementName=txtBox, Path=ActualWidth}">
<Rectangle.Fill>
<VisualBrush Visual="{Binding ElementName=txtBox}"/>
<Rectangle.Fill>
<Rectangle.LayoutTransform>
<ScaleTransform ScaleY="-0.75"/>
</Rectangle.LayoutTransform>
</Rectangle>
</StackPanel>
Here I wrote "Visual Brush",
then deleted few chars and look what I got:
Made a small change to your Xaml based on the information in your comment. The problem seems to be that the TextBlock doesn't have a Background so I guess that the VisualBrush just finds the visible part of the TextBlock for rendering and then stretches it to the full length of the TextBlock based on the Bindings.
The following Xaml works fine when the TextBlock has Background="Transparent" but reproduces your problem without it
Update: In the chat, the OP found that the Width Binding kept the TextBox from shrinking when deleting characters. So removing the Width binding fixes the centering issue as well.
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBox Name="txtBox"/>
<TextBlock Name="textBlock" Text="{Binding ElementName=txtBox, Path=Text}"
Background="Transparent"/>
<Rectangle Height="{Binding ElementName=textBlock, Path=ActualHeight}">
<Rectangle.Fill>
<VisualBrush Visual="{Binding ElementName=textBlock}"/>
</Rectangle.Fill>
<Rectangle.LayoutTransform>
<ScaleTransform ScaleY="5"/>
</Rectangle.LayoutTransform>
</Rectangle>
</StackPanel>