Can someone give me an example of how to style a button with XAML hat has three states (hover, normal, pressed). i want the whole area of the button to be covered with an image (one for each of the three different states) and i want text to be on top that also has three different colors for the different states. i have something like this already (without the color states on the textblock). the problem i'm having at this point is that the textblock is blocking the input events for the button undernearth (i also haven't implemented the color changes for the textblock....
current code:
<DataTemplate x:Name="SubjectItemTemplate">
<Canvas Width="225" Height="225">
<Button Canvas.Left="0" Canvas.Top="0"
Command="{Binding ElementName=LayoutRoot, Path=DataContext.NavigateToUnitsPage}"
CommandParameter="{Binding}">
<Button.Template>
<ControlTemplate>
<Grid Background="{Binding LightThemeColor}" Width="205" Height="205">
<controls:ImageButton HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,0,0,0"
NormalStateImageSource="{Binding ImageUriNormal}"
HoverStateImageSource="{Binding ImageUriHover}"
PressedStateImageSource="{Binding ImageUriPressed}" Command="{Binding ElementName=LayoutRoot, Path=DataContext.NavigateToUnitsPage}"
CommandParameter="{Binding}"/>
<TextBlock Text="{Binding Name}" FontSize="18" TextWrapping="Wrap" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,168,0,0" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Canvas>
</DataTemplate>
The reason that the ImageButton events are not being handled as expected with the TextBlock is because the TextBlock is located in-line with the ImageButton and not contained inside the ImageButton. To change this, the TextBlock has to be placed inside the ImageButton.
<controls:ImageButton HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,0,0,0"
NormalStateImageSource="{Binding ImageUriNormal}"
HoverStateImageSource="{Binding ImageUriHover}"
PressedStateImageSource="{Binding ImageUriPressed}" Command="{Binding ElementName=LayoutRoot, Path=DataContext.NavigateToUnitsPage}" CommandParameter="{Binding}" >
<TextBlock Text="{Binding Name}" FontSize="18" TextWrapping="Wrap" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,168,0,0" />
</controls:ImageButton>
Related
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
I'm developing an UWP app and i'm trying to add two buttons and a textblock for each image that binded.
I'm binding the images in XAML like this; (Updated with the full code)
<GridView Name="display"
Margin="30,100,30,5"
Foreground="#FFFFFF"
IsItemClickEnabled="True"
ItemClick="display_ItemClick"
ItemsSource="{Binding}">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Width="240"
Height="240"
Source="{Binding Path=Image}" />
<StackPanel Name="buttonPanel"
Orientation="Horizontal"
Margin="0,-45,10,0"
HorizontalAlignment="Center">
<Button Name="button_minus"
Content="-"
Width="40"
Height="30"
Click="eksi_click"
FontWeight="Bold">
<Button.Background>
<ImageBrush ImageSource="Assets/btn2.png" Stretch="Fill" />
</Button.Background>
</Button>
<Border Background="White" CornerRadius="10" Height="30">
<TextBlock x:Name="popupNumber"
Width="50"
Height="25"
Margin="0,6,0,0"
Text="{Binding Path=numberOfCopy}"
TextAlignment="Center">
</TextBlock>
</Border>
<Button Name="button_plus" Content="+" Width="40" Height="30" Click="artı_Click" FontWeight="Bold">
<Button.Background>
<ImageBrush ImageSource="Assets/btn2.png" Stretch="Fill" />
</Button.Background>
</Button>
</StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
I added a stackpanel that contains the Buton-TextBlock-Button format in the seciton of code that i commented out. When i do this, some buttons are not working and i don't actually know is it the best way to do my task.
When i launch the program, some buttons are not available to click. I can see them in the UI but i can't click them. The most awkward thing is only in a specific area on the UI, buttons are unavailable.
My click events are just fine, i have some binding issues, i am wondering is it the proper way to to something like that. Is it the way i am using causes the binding problem?
In in each TextBlock the values should be different for each image and i can't access buttons and textblocks in .cs file because they are in DataTemplate. So i might be doing this in a wrong way.
So do you have any solutions for adding buttons and textblocks for each binded image in Datatemplate? I'm not sure my way is the best way.
Any help would be greatly appreciated.
Thanks.
The code is shown below. When I try to click on the middle of the button you are actually clicking the TextBlock and not triggering the Button2_click event. Only if you click outside of the TextBlock and still inside of the Button it would trigger the event.
What is the right way of having a two line text inside the content of the Button.I'm a new on StackOverFlow so I don't have enough reputation to add a picture. Please some Help with this question. Thanks for the Help in Advance.
<Button Content="" Height="77" HorizontalAlignment="Left" Margin="70,136,0,0" Name="Button2" VerticalAlignment="Top" Width="202" />
<TextBlock TextAlignment="Center" Padding="2" Margin="80,152,0,135" FontSize="16" HorizontalAlignment="Left" Width="181" TextWrapping="NoWrap" Foreground="#FF8787DB" FontWeight="Bold"> Calculate CTR Losses<LineBreak></LineBreak> (From FTD Data)</TextBlock>
Put your TextBlock inside your button:
<Button HorizontalAlignment="Left" Margin="70,136,0,0" Name="Button2" VerticalAlignment="Top">
<TextBlock Padding="2" FontSize="16" TextWrapping="NoWrap" Foreground="#FF8787DB" FontWeight="Bold">
Calculate CTR Losses
<LineBreak />
(From FTD Data)
</TextBlock>
</Button>
This will implicitly set Button.Content, it's an equivalent of:
<Button HorizontalAlignment="Left" Margin="70,136,0,0" Name="Button2" VerticalAlignment="Top">
<Button.Content>
<TextBlock Padding="2" FontSize="16" TextWrapping="NoWrap" Foreground="#FF8787DB" FontWeight="Bold">
Calculate CTR Losses
<LineBreak />
(From FTD Data)
</TextBlock>
</Button.Content>
</Button>
Your original code overlays the TextBlock over the button, so both of these elements aren't related.
I'm new in XAML for Windows Phone 8.1 and have some troubles with
making a Stackpanel clickable
collapse Item, when clicked
My work so far looks like that:
And the Code to that (please correct me, if there are major flaws):
<Border CornerRadius="15" Background="#FF595656" Margin="0" Grid.ColumnSpan="2" Height="80">
<StackPanel Orientation="Horizontal">
<StackPanel Width="20" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel HorizontalAlignment="Left" Height="80" Margin="0,0,0,0" VerticalAlignment="Center" Width="51">
<Image HorizontalAlignment="Left" Height="51" Margin="0,15,0,0" Width="51" Source="Assets/fish.png" Stretch="Fill" RenderTransformOrigin="2.307,0.881" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Width="10" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel HorizontalAlignment="Left" Height="80" Margin="0" VerticalAlignment="Top" Width="310">
<TextBlock HorizontalAlignment="Left" Height="25" Margin="0,20,0,0" TextWrapping="Wrap" Text="Entry 1" Width="310" VerticalAlignment="Top" FontSize="18" Foreground="Black" FontWeight="Bold"/>
<TextBlock HorizontalAlignment="Left" Height="17" Margin="0" TextWrapping="Wrap" Text="Short description Entry 1" Width="310" VerticalAlignment="Top" Foreground="#FF0097FF"/>
</StackPanel>
</StackPanel>
</Border>
This code will later be wrapped inside a ListBox with Image, Entry 1 and the short description being bound:
<ListBox x:Name="ListBox1" Margin="0"
Width="400" Height="200" HorizontalAlignment="Left"
ItemsSource="{Binding}" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2" >
<ListBox.ItemTemplate>
<DataTemplate>
// the code above
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So my question is:
How can I make a nice looking expansion/collapse of each Item in the ListBox, whenever I click on it?
Thank you very much in advance.
The real question is here is what do you want it to collapse to? There are too many possible ways to collapse some visual data item. Do you just want to change the height of the item or do you want some fancy animation that collapse some property?
If the height is what you're looking for it's pretty easy. Just attach an Tap Event on that Border of yours. On a sidenote, you probably want to edit the ItemContainerStyle to have <Setter Property="HorizontalContentAlignment" Value="Stretch"/> so the Listbox will stretch across the screen, otherwise imho it's un-useable.
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Red" BorderThickness="0,1" Tap="Border_Tap">
<StackPanel>
<!--- rest of template --->
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
Then calculate the Minimum height you want to show (make sure it's actually useable, meaning... I can Tap on it again to show the whole thing without using a Mag Glass).
private void Border_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
int minHeight = 40; // change to whatever you want
Border b = sender as Border;
if (b.ActualHeight > minHeight)
{
b.Height = minHeight;
}
else
{
b.Height = double.NaN; // this will change the height back to Auto, showing everything
}
}
Code In Action
This is just a quick solution to your question. Some people on here would rather have you create a StoryBoard Animation on the Height Property of the Selected state in the VisualStateManager. If you reword or create a new question explicitly stating you want a VisualStateManager solution, I will provide you one as well. Good luck.
i am new to windows phone development,..
So i am preparing an application in that i given Background Color as white for every page..
in my app i added a search so that user can search data using two text Box..
In that I have given Bg color as white and foreground Color as black.. in that TextBlock is Viable But TextBox are not Visable they are mixing in background...
This is My xaml fiel..
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Margin="10,114,10,311">
<TextBlock Text="Enter Name"
TextWrapping="Wrap"
Tap="TextBlock_Tap"
Foreground="Black" />
<TextBox x:Name="Enter Name Field"
GotFocus="TextBox_GotFocus"
LostFocus="TextBox_LostFocus"
Foreground="RosyBrown" Height="46" Margin="27,0,56,0" />
<TextBlock Text="Enter A Model number"
TextWrapping="Wrap"
Tap="TextBlock_Tap"
Foreground="Black"/>
<TextBox x:Name="Enter A Model number Field"
GotFocus="TextBox_GotFocus"
LostFocus="TextBox_LostFocus"
Foreground="RosyBrown" Height="46" Margin="27,0,56,0" />
</StackPanel>
</Grid>
Sorry i want to add a Image Button also i tried....
i want it like this
This may help you.
<Grid Grid.Row="1" Background="White">
<StackPanel Margin="10,114,10,311">
<TextBlock Text="Enter Name"
TextWrapping="Wrap"
Tap="TextBlock_Tap"
Foreground="Black" />
<TextBox x:Name="Enter Name Field"
GotFocus="TextBox_GotFocus" BorderBrush="Gray" BorderThickness="2"
LostFocus="TextBox_LostFocus"
Foreground="RosyBrown" Height="46" Margin="27,0,56,0" />
<TextBlock Text="Enter A Model number"
TextWrapping="Wrap"
Tap="TextBlock_Tap"
Foreground="Black"/>
<TextBox x:Name="Enter A Model number Field"
GotFocus="TextBox_GotFocus"
LostFocus="TextBox_LostFocus" BorderBrush="Gray" BorderThickness="2"
Foreground="RosyBrown" Height="46" Margin="27,0,56,0" />
<Image Height="40" Width="150" Source="your image path" Tap="Image_tap" />
</StackPanel>
</Grid>
add Background="Black" (or whatever color you want) in all your TextBox.
For that what you have shown use BorderBrush="Black", decrease the border thickness if you need to. Yes, you can add a image button, use a image as your button background.
<Button>
<Button.Background>
<ImageBrush Source="your_file.jpg" Stretch="Fill"/>
</Button.Background>
</Button>
Note: It is not a good idea to write x:Name value with spaces. what you write in x:Name ultimately become a variable name of type TextBox (in this case) and c# doesn't permit variable name with space, So just delete the spaces and use x:Name="Enter_A_Model number_Field" or simply x:Name="EnterAModelNumberField"
Use your textbox surrounded with border, since you are using a white background.I think below code may help you to get an idea.
<Border BorderThickness="1" Grid.Row="2" Name="brdUsrName" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="60" Background="Black">
<TextBox Name="txtUserName" Margin="-10,-10,-10,-10" />
</Border>