WPF textBox changes color halfway - c#

I have a strange problem with the textBox in WPF. I have a simple textbox inside a stackpanel binded with some text on the code behind. When the text becomes too long some part of it changes color. Here is an example
The stackpanel is this
<StackPanel Canvas.Left="50" Canvas.Top="111">
<TextBlock Text="{Binding Title}" FontSize="32" Foreground="White" />
<TextBlock Text="{Binding Subtitle}" FontSize="15" Foreground="#9EA3AA"/>
</StackPanel>
How can I make all the text white?

As mentioned by Clemens you are experiencing overlap. To fix this make the cell containing the orange cpu image and text not extend so high. You should be able to just drag and drop.

Related

Implementation for entering a password: How to click on the TextBox located under the TextBlock?

I'm trying to make an alternative way for a password binding (I know there are different ways)
I put a textblock and a textbox in the same location
The user will write inside the textbox, its foreground will be transparent
The textblock will bind with the length of the textbox's text and show "*"s according to the length.
when I'll hold down some "eye icon" the textblock will not be visible and the the textbox's foreground will be black
The problem is that when I put them both together, the block blocks the box and I can't write in it.
Maybe it's just a property I didn't find, "priority" or something
Would like a suggestion on what should I do, thank you :)
The problem is that when I put them both together, the block blocks the box and I can't write in it.
Maybe it's just a property I didn't find, "priority" or something
IsHitTestVisible property.
Example:
<StackPanel>
<TextBox Text="1234"/>
<Grid>
<TextBox x:Name="textBox" Text="1234"/>
<TextBlock Text="***********" Background="Wheat"
IsHitTestVisible="False"/>
</Grid>
<TextBlock Text="{Binding Text, ElementName=textBox}"/>
</StackPanel>
BUT!!!
In my opinion, it is easier to make the TextBox transparent.
In such an implementation, you can see where the input cursor is in the field.
Example:
<StackPanel>
<TextBox Text="1234"/>
<Grid>
<TextBlock Text="***********" Background="Wheat"/>
<TextBox x:Name="textBox" Text="1234"
Background="Transparent"
Foreground="Transparent"
BorderThickness="0"/>
</Grid>
<TextBlock Text="{Binding Text, ElementName=textBox}"/>
</StackPanel>
Only you should change controls code position!
change

How to change the design (thickness of tick, the shape of a tick, etc...) of ticks on a slider in WPF C#

I want to change the thickness of ticks and the shape of a tick (arrow shaped etc...) beneath a slider in WPF. I have looked everywhere. What i found was only how to change the height and the color of ticks.
Not a great solution but you can make a custom template and then add a UniformGrid with the desired items.
To add a custom template, add a slider to your xaml. Assuming you are using visual studio, you can go to the Properties Window and under the Miscellaneous section you can go to Templates -> Convert to New Resource.
From here you will be able to make changes to the default template.
Just under the TickBars, I added a UniformGrid. You can remove the TickBars but I left them to show as a comparison in the picture below.
<UniformGrid Columns="11">
<TextBlock Text="▼" TextAlignment="Left"/>
<TextBlock Text="▼" TextAlignment="Left" Margin="7,0,0,0"/>
<TextBlock Text="▼" TextAlignment="Left" Margin="13,0,0,0"/>
<TextBlock Text="▼" TextAlignment="Left" Margin="20,0,0,0"/>
<TextBlock Text="▼" TextAlignment="Left" Margin="24,0,0,0"/>
<TextBlock Text="▼" TextAlignment="Center"/>
<TextBlock Text="▼" TextAlignment="Right" Margin="0,0,24,0"/>
<TextBlock Text="▼" TextAlignment="Right" Margin="0,0,20,0"/>
<TextBlock Text="▼" TextAlignment="Right" Margin="0,0,13,0"/>
<TextBlock Text="▼" TextAlignment="Right" Margin="0,0,7,0"/>
<TextBlock Text="▼" TextAlignment="Right"/>
</UniformGrid>
The text is for a down arrow. You can find other arrows here.
The first, middle, and last textblock will align with where the ticks would normally be. The rest will need offsets, which is what the margins are for. They will be equal on each side, but note that this isn't very reasonable to hard code these unless you know the control will not change size. If the control changes size, you will have to do some math to generate both the font and the margins dynamically.
I changed my foreground and background colors for better visibility but you should end up with something like this.

How can i increase the spacing between radio buttons

I can't find any way to increase the spacing between each radio button to match the format of my interface
this is my XAML code for the radio button
<dxe:ListBoxEdit Name="xrbSplitFreight" Grid.Row="1" Grid.RowSpan="5" FontWeight="Bold" Grid.Column="8" Height="143" VerticalAlignment="center" Width="218" HorizontalAlignment="Left" Grid.ColumnSpan="3" ShowBorder="False" Margin="0,0,0,7">
<dxe:ListBoxEdit.StyleSettings>
<dxe:RadioListBoxEditStyleSettings />
</dxe:ListBoxEdit.StyleSettings>
and this is how im populating the buttons
private void InitSources()
{
List<String> source = new List<String>();
source.Add("Split Freight");
source.Add("Print Comment");
source.Add("Do Not Split Freight");
xrbSplitFreight.ItemsSource = source;
}
I have tried numerous properties like padding and margin properties and it doesn't change the spacing.
If I understand you correctly, what you want is to increase the space between each radiobox and its text so it matches the space between the checkbox and its text above.
The problem here is that the radiobox content does not have a margin property to move it independently from the radiobox. Luckily in WPF you can encapsulate almost every control in any other control. So the solution, instead of using simple text, is to use a control that can display text and has a margin property like this:
<RadioButton GroupName="GroupName">
<RadioButton.Content>
<TextBlock Text="Option 1" Margin="5 0 0 0"/>
</RadioButton.Content>
</RadioButton>
Try using Margin to add space between controls.
<RadioButton Margin="5"></RadioButton>
or
<RadioButton Margin="5,0,5,0"></RadioButton>
EDIT
Check this out.
<ListBox ItemsSource="MyList">
<ListBox.ItemTemplate>
<DataTemplate>
<RadioButton Margin="10" Content="{Binding Value}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Each RadioButton is separated with margin given.
I think the problem is You're trying to place radio buttons inside of ListBox. Have You tried putting them into StackPanel with vertical orientation property? If You'll try You'll probably be able to set margins between them.

TextTrimming TextBlock with other controls next to it

I'm trying to make a really simple title panel, which contains an Image-icon and TextBlock-title in the center of the panel:
To achieve this with TextBlock, I could use StackPanel with Vertical-orientation. But this doesn't work when I need to add the Image in front of TextBlock.
This is the current code, which doesn't work with the TextTrimming:
<StackPanel Orientation="Horizontal">
<Image
Height="28"
Width="28"
Margin="0,0,10,0"
Source="/Resources/Images/Icons/MyIcon.png"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<TextBlock x:Name="TitleText"
Text="Test text test text Test asd asd "
VerticalAlignment="Center"
FontSize="28"
TextWrapping="NoWrap"
TextTrimming="WordEllipsis"/>
</StackPanel>
Another solution could be to control the Width of the TextBlock in code, but I'd like to achieve this within XAML. Any ideas?

Preventing items in ListBox from exceeding its width

I'm sure this is simple, but I just can't seem to figure it out. Basically, I'm trying to force ListBoxItem from allowing itself to go outside of ListBox width. For example, let's say we have a crude ListBox with a TextBox for each ListBoxItem:
<ListBox HorizontalContentAlignment="Stretch">
<ListBoxItem>
<TextBox TextWrapping="Wrap"/>
</ListBoxItem>
<ListBoxItem>
<TextBox TextWrapping="Wrap"/>
</ListBoxItem>
<ListBoxItem>
<TextBox TextWrapping="Wrap"/>
</ListBoxItem>
</ListBox>
If you were to type in them, the text, eventhough it has TextWrapping set to Wrap, will continue flowing to the right, as the width of the ListBoxItem and the ListBox adjust to the width of the content (note that the HorizontalScrollBar appears):
I'm sure this is an intended behavior and is probably caused by the ScrollViewer within the template, but I want the text to wrap and be contained within the original width. I can solve this by setting a static width, but it would be a sketchy design decision and not something I want to do (it would restrict things from being re-sized easily).
Basically, the behavior I'm seeking is that of an ItemsControl:
<ItemsControl>
<TextBox TextWrapping="Wrap"/>
<TextBox TextWrapping="Wrap"/>
<TextBox TextWrapping="Wrap"/>
</ItemsControl>
I just want to keep the ListBox control because of its other behaviors, which I need. Any ideas?
This will disable the horizontal scrolling (even though it sounds like it's only disabling visibility):
<ListBox HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">

Categories

Resources