Handling Content property in WPF - c#

I'm currently facing huge problem i.e I'm showing Image and some text in a image the problem is when I change content property of button from code, my image disappears and only assigned text is shown, I wan to retain image and just wann change the text, Any suggetions how to handle it
<Button x:Name="btnPrescan" Margin="8" Grid.Column="2" Click="btnPrescan_Click">
<StackPanel Orientation="Horizontal">
<Image Source="Icons\Scan_Start_Icon.png" Height="14" Width="23"/>
<TextBlock x:Name="tbButtonText" Text=" Prescan"/>
</StackPanel>
</Button>
and button looks something like this
Thanks

Bind the text to a backing property on your UserControl:
<Button x:Name="btnPrescan" Margin="8" Grid.Column="2" Click="btnPrescan_Click">
<StackPanel Orientation="Horizontal">
<Image Source="Icons\Scan_Start_Icon.png" Height="14" Width="23"/>
<!-- assumes DataContext is set appropriately -->
<TextBlock Text="{Binding ButtonText}"/>
</StackPanel>
</Button>
Then just change the backing property:
this.ButtonText = "New button text";

You should do this way,
((TextBlock)btnPrescan.GetTemplatedChild("tbButtonText")).Text = "Your Text"

Related

WPF Material Design Textbox is showing through slides. Is there a workaround?

I tried using a textbox inside a WPF Material Design transitioner slide. The textbox is visible even when changing slides.
A dotted line from the textbox on the next slide is visible, and viceversa.
Has anyone else encountered this issue? Is there any workaround I could use?
This is the xaml I used. I am using the transitioner control although I believe the flipper control causes a similar effect when used with textboxes.
<Grid>
<materialDesign:Transitioner SelectedIndex="0">
<materialDesign:TransitionerSlide>
<StackPanel HorizontalAlignment="Center">
<TextBlock Text="Hello, this is my first page!" Margin="10"/>
<TextBox materialDesign:HintAssist.Hint="Type your first text here!" Margin="10"/>
<Button Command="{x:Static materialDesign:Transitioner.MoveNextCommand}" Content=">" HorizontalAlignment="Center" Margin="10"/>
</StackPanel>
</materialDesign:TransitionerSlide>
<materialDesign:TransitionerSlide>
<StackPanel HorizontalAlignment="Center">
<TextBlock Text="Hello, this is my 2nd page!" Margin="15"/>
<TextBox materialDesign:HintAssist.Hint="Type your second text here!" Margin="15"/>
<Button Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}" Content="<" HorizontalAlignment="Center" Margin="15"/>
</StackPanel>
</materialDesign:TransitionerSlide>
</materialDesign:Transitioner>
</Grid>
I believe the issue might lie in the dotted line that appears when a textbox is disabled, so possibly by removing that, the textbox would no longer show through slides. But that's just my guess.
Any help is appreciated!
For the best approach, please refer to this answer.
Try to add the following implicit style to your App.xaml or window:
<Style TargetType="materialDesign:BottomDashedLineAdorner">
<Setter Property="Visibility" Value="Collapsed" />
</Style>
I try several ways and I found solution
please set BorderThickness="0" in textboxes like this
<TextBox materialDesign:HintAssist.Hint="Type your second text here!" Margin="10" BorderThickness="0"/>
Wrapping the offending control in:
<AdornerDecorator>
</AdornerDecorator>
seems to work.
Hi problem is in your margin , please set all your margins to 10 like this
<Grid>
<materialDesign:Transitioner SelectedIndex="0">
<materialDesign:TransitionerSlide>
<StackPanel HorizontalAlignment="Center">
<TextBlock Text="Hello, this is my first page!" Margin="10"/>
<TextBox materialDesign:HintAssist.Hint="Type your first text here!" Margin="10"/>
<Button Command="{x:Static materialDesign:Transitioner.MoveNextCommand}" Content=">" HorizontalAlignment="Center" Margin="10"/>
</StackPanel>
</materialDesign:TransitionerSlide>
<materialDesign:TransitionerSlide>
<StackPanel HorizontalAlignment="Center">
<TextBlock Text="Hello, this is my 2nd page!" Margin="10"/>
<TextBox materialDesign:HintAssist.Hint="Type your second text here!" Margin="10"/>
<Button Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}" Content="<" HorizontalAlignment="Center" Margin="15"/>
</StackPanel>
</materialDesign:TransitionerSlide>
</materialDesign:Transitioner>
</Grid>
I hope it help you

WPF: Text under image in button template

I am trying to put a text under an image within button template using a stackpanel but it is not working. Only image is visible, text is not visible. Using template, I can but image as background filling all the button. See below:
<Button Name="btnAdd" Height="36" Width="36" Click="btnAdd_Click" HorizontalAlignment="Center" Margin="10">
<Button.Template>
<ControlTemplate>
<StackPanel Orientation="Vertical">
<Image Source="/MyPath/Add.png"/>
<Label Padding="0">My Button Text</Label>
</StackPanel>
</ControlTemplate>
</Button.Template>
</Button>
How can I do to make my label appear centered under the image and in a small font?
You have 2 problems. You set the Height and Width of your Button to 36 but the text "My Button Text" is wider then 36. And if you Add.png is higher then 36 pixel you wont have any space left for displaying the text.
That's why I would suggest setting the Image Width and Height instead of the Button Width and Height.
For displaying the text in the center under the image you should have to set the HorizontalAlignment property of the Label to "Center".
The result could look like this
<Button>
<Button.Template>
<ControlTemplate>
<StackPanel Orientation="Vertical">
<Image Source="/MyPath/Add.png"
Height="36"
Width="36"/>
<Label HorizontalAlignment="Center"
Content="My Button Text" />
</StackPanel>
</ControlTemplate>
</Button.Template>
</Button>
And in a shorter form
<Button>
<StackPanel Orientation="Vertical">
<Image Source="/MyPath/Add.png"
Height="36"
Width="36"/>
<Label HorizontalAlignment="Center"
Content="My Button Text" />
</StackPanel>
</Button>

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?

How do I place a text over a image in a button in WinRT

I want to create a button using a image as background and on top of the background I want to place my text.
I tried something like this:
<Button Style="{StaticResource ImageButtonStyle}">
<StackPanel>
<TextBlock Text="test"></TextBlock>
<Image Source="ms-appx:///Skins/Images/buton.png" Stretch="None" />
</StackPanel>
</Button>
The text will not be centered correctly.
<Button Style="{StaticResource ImageButtonStyle}">
<StackPanel>
<TextBlock Text="test"></TextBlock>
<Label Padding="0">My Button Text</Label>
</StackPanel>
</Button>
The control Label doesn't exists.
How do I center correctly my text on the image in my first attempt?
Do you know a better way?
You should use a grid instade the stackpanel. Try something like this:
<Button >
<Grid>
<Image Source="..." Stretch="None" />
<TextBlock Text="test" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
</Button>

How to enable text box to contain default value and be able to edit it in WP8?

I'm scanning a document and saving three values.
I want to create a pop-up that will appear after the scan and will consist of 3 text boxes. Each text box will contain by default the scanned value, when I will have the abuilty to edit it by pressing on the text box.
I've looked at the text box properties but found only "read-only" property.
Besides that, I really don't have a clue how to start and what to look for.
meanwhile I have this xaml describing the pop-up:
<Popup x:Name="AfterScan" Grid.Row="2">
<Border BorderThickness="2" Margin="10" BorderBrush="{StaticResource PhoneAccentBrush}">
<StackPanel Background="Gainsboro" Width="434" Height="400">
<TextBlock Text="Bill Details" TextAlignment="Center" FontSize="40" Margin="10,0" Foreground="Black"/>
<TextBlock Text="Please review Bill Details and click OK when done" FontSize="17" Margin="40,0,10,0" Foreground="Black"/>
<StackPanel Orientation="Horizontal" Margin="0,10">
<TextBox x:Name="test" Width="100" Margin="10,0,10,0" Foreground="Black" BorderBrush="Black"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,10">
<TextBox x:Name="test2" Width="100" Margin="10,0,10,0" Foreground="Black" BorderBrush="Black"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,10">
<Button x:Name="btn_OK" Content="OK" Width="215" Margin="110,0,10,0" Click="EnsuredDetails_Click" Foreground="Black" BorderBrush="Black"/>
</StackPanel>
</StackPanel>
</Border>
</Popup>
I know that If I write a value - I can get it and use it later, but I want the text box to contain my scanned value.
I also saw this article:
http://mrbool.com/how-to-build-a-custom-textbox-in-windows-phone/25846
My problem is that the default value of this text box is a string declared in the xaml code, and I need it to be a dynamic parameter:
<my:DefaultTxt_box Height="103" HorizontalAlignment="Left" Margin="-4,49,0,0"Name="defaultTxt_box1"
Text="" D_Text="Enter Your Name" VerticalAlignment="Top" Width="460"FontSize="32" FontFamily="Comic Sans MS" Foreground="#FFFFFF4C">
<my:DefaultTxt_box.Background>
Can someone please guide me a little?
Thanks a lot!
You have to options to get this done.
Option 1)
You can bind text property of textbox with dynamic value property. for this you can use this link.
Option 2)
You will have three textboxes in xaml of popup.
<TextBox x:Name="test" Width="100" Margin="10,0,10,0" Foreground="Black" BorderBrush="Black" Text="your default value will go here"/>
<TextBox x:Name="test_2" Width="100" Margin="10,0,10,0" Foreground="Black" BorderBrush="Black" Text="your default value will go here"/>
<TextBox x:Name="test_3" Width="100" Margin="10,0,10,0" Foreground="Black" BorderBrush="Black" Text="your default value will go here"/>
Then you can set text property of text boxes from code behind c# code. For this, first you have to get value out from scanned document.
Suppose you have got these values in variables ScannedValue1, ScannedValue2 and ScannedValue3
String ScannedValue1 ; //You will have to assigned values from scanned copy here
String ScannedValue2 ; //You will have to assigned values from scanned copy here
String ScannedValue3 ; //You will have to assigned values from scanned copy here
Then you can utilize these values to assign them to text boxes of pop up.
test.Text = ScannedValue1;
test_2.Text = ScannedValue2;
test_3.Text = ScannedValue3;
Hope you can get idea from this :)
This may be what you're looking for:
Textbox myTxtbx = new Textbox();
myTxtbx.Text = "Enter text here...";
myTxtbx.OnFocus += OnFocus.EventHandle(RemoveText);
myTxtbx.LoseFocus += LoseFocus.EventHandle(AddText);
public RemoveText(object sender, EventArgs e)
{
myTxtbx.Text = "";
}
public AddText(object sender, EventArgs e)
{
if(myTxtbx.Text == "")
myTxtbx.Text = "Enter text here...";
}
Adding placeholder text to textbox
Every textBox should have a x:Name property, and just set it in your C# code like this:
myTextBox.Text = 'myScannedValue';
'myTextBox' is your x:Name of TextBoxin XAML. try it.
Use PhoneTextBox from Windows Phone Toolkit. http://www.geekchamp.com/articles/windows-phone-toolkit-phonetextbox-in-depth

Categories

Resources