first post here so if I do anything wrong please slap me.
I'm currently trying to learn UWP code and I want to try to create a bottom naivation bar. I'm trying to work with stackpanels to do so
The idea is that when a stackpanel is clicked / tapped it should load a new page into viewport, however I can't figure out the correct code to do so. Here's an short version of my stackpanel:
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<StackPanel Name="FirstButton" Tapped="FirstButton_Tapped">
<TextBlock x:Name="Icon1" />
<TextBlock x:Name="Text1" />
</StackPanel>
<StackPanel Name="SecondButton" Tapped="SecondButton_Tapped">
<TextBlock x:Name="Icon2" />
<TextBlock x:Name="Text2" />
</StackPanel>
<StackPanel Name="ThirdButton" Tapped="ThirdButton_Tapped">
<TextBlock x:Name="Icon3" />
<TextBlock x:Name="Text3" />
</StackPanel>
I chose stackpanel because that was the best way for me to have a bottom and horizontal aligned bar with an icon on top and text displaying under it.
(if you got a better idea feel free to post it)
Now the question is how i should write my C# code so that the Tapped event will load a second page into the viewport.
(further, the style I'm aiming for is something similar to what deezer uses, example is here: http://imgur.com/WNNi96v
Thank you in advance!
As #Pedro G. Dias says far better to use Button control as it has many more benefits (Visual States) that you associate with user clicking/ Tapping a Button rather than using the Tap event of StackPanel
You can customise a Button easily by utilising the ContentTemplate
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<Button x:Name="FirstButton" Click="FirstButton_Click">
<Button.ContentTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:Name="Icon1" />
<TextBlock x:Name="Text1" />
</StackPanel>
</DataTemplate>
</Button.ContentTemplate>
</Button>
<!--More buttons here-->
</StackPanel>
Simply create buttons and place them inside each stackpanel. The button.Content property of the Button control will let you put the two textblocks inside it.
Related
How can I change the style of this button? I tried to use Style from the internet, but I got an error every time. I attach 2 screenshots, the original one and how it should look.
The original version
As it should be in the end
<Expander Header="1">
<Border Margin="50,0,0,0">
<StackPanel>
<TextBlock Text="6456567"/>
<TextBlock Text="6456567"/>
<Button Content="111"/>
</StackPanel>
</Border>
</Expander>
I have TabControl.
I want move tabs to the left but window with content should not change the size.
Result:
My code:
<controls:TabControl Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" x:Name="MyTabControl" BorderBrush="Transparent" BorderThickness="0" Padding="0">
<controls:TabControl.Resources>
<DataTemplate x:Key="ClosableTabItem">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="textBlockName" VerticalAlignment="Center" Text="{Binding}"/>
<HyperlinkButton Margin="6,0,0,0" x:Name="tabItemClose" VerticalAlignment="Center"
Click="tabItemClose_Click">
</HyperlinkButton>
</StackPanel>
</DataTemplate>
</controls:TabControl.Resources>
<controls:TabItem Header="Main" x:Name="MainTabItem" ToolTipService.ToolTip="Main" >
</controls:TabItem>
</controls:TabControl>
I won't really post a huge answer with a lot of XAML , rather i will give you some basic ideas of what you can do :)
1.Inside each tabitem,just add a grid and create two columns.Place every required element in the middle column and make sure the Grid's HorizontalAlignment and VerticalAlignment are set to Stretch
You can customize the template of your tabcontrol and set required width/margin of TabPenl/ContentPresenter.
I think 1 is the easiest solution so far,if you want to use 2 , leave a comment and i'll add some helpful XAML
Hope this helps :)
I am creating a simple image editing-style app and am attempting to use MVVM for the first time. The idea is to parse proprietary text files and represent them visually in tabs within the app so they can be updated with paint strokes and the like before being converted back to text. In figuring out how to get mouse position to the view model, I found Mark Green's solution works well; however, I can't get it to work if I place it inside my TabControl.ContentTemplate - if I do so, the program crashes unceremoniously when I load the first text file (which creates the first tab). Here's the relevant section of code (see link for the code used in the ViewModels):
<Grid>
<!--If I stick the Interaction behavior here it works, but I get mouse position relative to entire grid-->
<TabControl ItemsSource="{Binding Maps}" SelectedIndex='{Binding TabIndex}'>
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<Image x:Name="imgMap" Source='{Binding Content}'>
<i:Interaction.Behaviors><!--Putting it here causes an unhandled exception-->
<local:MouseBehaviour MouseX="{Binding PanelX, Mode=OneWayToSource}"
MouseY="{Binding PanelY, Mode=OneWayToSource}" />
</i:Interaction.Behaviors>
</Image>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Grid>
As you can see from my comments in the code, my placement of the interaction behavior seems to be what is breaking the app. Since the exception occurs in external code, I can't figure out exactly what is wrong but I suspect it has something to do with the code being inside a template (please correct me if I am wrong!).
My question is this: how do I get interaction behaviors (and later triggers - I will want mouse button events as well) working within the template, or am I going about this the wrong way? Is there a better solution to get mouse position (relative to the image) to the ViewModel?
Many thanks in advance for any help offered!
UPDATE
Per STrenat's suggestion, I updated the MouseBehavior class to use UIElement instead of Panel:
public class MouseBehaviour : System.Windows.Interactivity.Behavior<UIElement>
{
// Rest of code from Mark Green's solution linked in original post
}
To get access to the mouse position values in the main window (instead of inside the ItemTemplate), I updated my bindings in the XAML (with output text blocks now shown) to point to properties in the main viewmodel (without the relative reference you have to have the properties inside the TabItem):
<StackPanel>
<TextBlock Text="{Binding PanelX, StringFormat='X={0:0}, '}" />
<TextBlock Text="{Binding PanelY, StringFormat='Y={0:0}'}" />
<TabControl ItemsSource="{Binding Maps}"
SelectedIndex='{Binding TabIndex}'>
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<Image x:Name="imgMap"
Source='{Binding Content}'>
<i:Interaction.Behaviors>
<local:MouseBehaviour MouseX="{Binding DataContext.PanelX, RelativeSource={RelativeSource AncestorType={x:Type Window}}, Mode=OneWayToSource}"
MouseY="{Binding DataContext.PanelY, RelativeSource={RelativeSource AncestorType={x:Type Window}}, Mode=OneWayToSource}" />
</i:Interaction.Behaviors>
</Image>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</StackPanel>
The rest is as specified in the solution referenced above. Hope that helps anybody else running into this problem!
It should be simple but somehow I am getting problems to do it in a more generic way (without width and height properties).
I have a button and an image inside this button but when I insert an image I see the it is not 100% filled.
This is my code:
<Button Grid.Row="0" Grid.Column="1"
Style="{StaticResource BrowseButtonStyle}"
Click="ChangeLogo_Click">
<Image x:Name="imageControl" />
</Button>
How can I fill it?
If you go take a look at a copy of the default Button template you'll see the ContentPresenter has its Margin Template bound via a Setter with a "Padding" of 12,4 by default.
So easiest answer, just specify a zero padding.
<Button Grid.Row="0" Grid.Column="1"
Style="{StaticResource BrowseButtonStyle}"
Click="ChangeLogo_Click"
Padding="0">
<Image x:Name="imageControl" />
</Button>
Hope this helps.
I´m filling a listbox with a specific data, the code works fine, but I need to add a scrollviewer to the listbox because there are many elements inside, I tried to use a ScrolViewer and put inside the listbox, but doesn't work, here is the code
<StackPanel x:Name="Sites" Grid.Row="1" Orientation="Vertical">
<ListBox x:Name="ListSites" >
<ListBox.ItemTemplate>
<DataTemplate>
<Button Width="460" Height="120" Click="click" Name="btn">
<Button.Content>
<StackPanel Orientation="Vertical" Height="100" Width="460">
<TextBlock Width="460" Name="txtname" FontSize="22" Text="{Binding name}" Height="40" Foreground="CadetBlue" />
<TextBlock Width="460" Name="txtUrl" FontSize="22" Text="{Binding Url}" Height="60"/>
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
I fixed it, simply adding the Height property in the ListBox control
If the ListBox is not given infinite space for height then it should automatically scroll when items overflow its boundaries. For instance, if the second Grid row outside your stackpanel has explicit or 'star' height set, the scrollbar in the listbox will show up automatically.
See also: Silverlight: Difficulty with ScrollViewer
You shouldn't need to add a ScrollViewer to your ListBox. It will start scrolling when it runs out of room.
However, because you've put the ListBox inside a StackPanel it won't ever think it's run out of room because the StackPanel grows infinitely in the direction of it's orientation to accommodate its contents.
You'll need to use a different container for your ListBox.
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>