I have problem to customize the buttons' size in my stack panel. I made one experiment with Rectangle, it looks perfect, here is the code in the XAML:
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Rectangle Width="170" Height="170" Fill="Bisque" Margin="10,0,0,0" />
<StackPanel Orientation="Vertical" Margin="10,0,0,0">
<StackPanel Orientation="Horizontal">
<Rectangle Width="80" Height="80" Fill="Azure" />
<Rectangle Width="80" Height="80" Fill="Azure" Margin="10,0,0,0" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Rectangle Width="80" Height="80" Fill="Tomato" />
<Rectangle Width="80" Height="80" Fill="Azure" Margin="10,0,0,0" />
</StackPanel>
</StackPanel>
</StackPanel>
Here is the screen shot:
But, when I remove those Rectangles to Buttons,
like these in the XAML:
<Button x:Name="Btn2" >
</Button>
<Button x:Name="Btn3" Width="40" Height="40" Margin="11,0,0,0" >
</Button>
it looks not what i want:
I can't resize those 2 buttons. How to get a quick solution for this?
Buttons in WP8.1 have deafault minimum width - MinWidth property - try changing it and it should help.
A side note - consider using Grid panel instead of StackPanel for positioning elements. If you define some Rows and Columns, your app should scale correctly when used on different devices.
Related
I'm coding a simple windows phone 7.5 localization application.
I've changed the default pushpin template as :
<ControlTemplate TargetType="maps:Pushpin" x:Key="allPushpinsTemplate">
<Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" >
<Grid.RenderTransform>
<CompositeTransform Rotation="-45"/>
</Grid.RenderTransform>
<Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26"/>
<Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Red" Width="16"/>
</Grid>
</ControlTemplate>
When I click on a pushpin, I handle the event and change the template of the selected pin as :
<ControlTemplate TargetType="maps:Pushpin" x:Key="detailedPushpinTemplate">
<Grid x:Name="ContentGrid" Background="Transparent" Margin="-4,0,0,0">
<StackPanel >
<Grid Background="Black">
<StackPanel Margin="5,5,0,0">
<TextBlock Text="{Binding Adress}" Foreground="White" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ZipCode}" Foreground="White" />
<TextBlock Text="-" Foreground="White" Padding="3,0"/>
<TextBlock Text="{Binding City}" Foreground="White" />
</StackPanel>
<TextBlock Text="{Binding TelStd}" Foreground="White" />
<TextBlock Text="{Binding Email}" Foreground="White" />
<StackPanel Orientation="Horizontal">
<Button BorderBrush="Transparent" Click="Button_Click" CommandParameter="email" ClickMode="Press">
<Button.Content>
<Image Source="/Images/Icons/icon-mail.png" Width="40" Height="40" />
</Button.Content>
</Button>
<Button BorderBrush="Transparent" Click="Button_Click" CommandParameter="phone" ClickMode="Press">
<Button.Content>
<Image Source="/Images/Icons/icon-phone.png" Width="40" Height="40" />
</Button.Content>
</Button>
</StackPanel>
</StackPanel>
</Grid>
<Polygon Fill="Black" Points="0,0 29,0 0,29" Width="29" Height="29" HorizontalAlignment="Left" />
<Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left">
<Grid.RenderTransform>
<CompositeTransform Rotation="-45"/>
</Grid.RenderTransform>
<Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26" />
<Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Green" Width="16" />
</Grid>
</StackPanel>
</Grid>
</ControlTemplate>
So that I can display some info and some commands. The result works perfectly and display a black rectangle with all my custom data.
But, the other pins (default template) overlap the rectangle and appears on the top of my selected pin and hide information.
Has anyone an idea to force the selected pin template to be always on top of the other pins ?
for information the XAML of my map :
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Canvas >
<maps:Map ZoomBarVisibility="Visible" ZoomLevel="4" Center="46.8821,2.2697" Name="map1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Canvas.Top="0" Height="600" Width="460">
<maps:MapItemsControl x:Name="mapControl"/>
<maps:MapItemsControl ItemsSource="{Binding Locations}" >
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<maps:Pushpin Location="{Binding Location}" Template="{StaticResource allPushpinsTemplate}" MouseLeftButtonDown="Pushpin_MouseLeftButtonDown"/>
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
<maps:MapLayer Name="imageLayer"/>
</maps:Map>
<Button Content="some action" Height="70" HorizontalAlignment="Left" Margin="0" Name="button1" VerticalAlignment="Top" Width="170" Canvas.Left="140" />
</Canvas>
</Grid>
The only way I've been able to work around this default behaviour is to remove the original pin and then add a new one in the same position with the different template.
The newly added pin appears at the top in the Z-Order but I haven't been able to alter the Z-Order of existing pins once created.
Also remember to "reset" any pins in the selected state when the user clicks on another.
I guess this should help you: http://social.msdn.microsoft.com/Forums/en-US/wpdevelop/thread/c4055dba-3efd-4bf7-98b3-cd8e24d175ea
Is there any way to get the XAML element by its tag value??
My code is like this :
<Grid Tap="StackPanel_Tap" Tag="{Binding Type}" >
<Border BorderThickness="0" CornerRadius="0" BorderBrush="White" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="1" >
<Image Tag="{Binding Type}" Source="{Binding Location}" Opacity="1" Width="100" Height="100" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center" UseLayoutRounding="True" >
</Image>
</Border>
</Grid>
I am binding Tag Property for Grid , is there any way to get an object of Grid by using Tag Propertty??
Sorry for less information the thing is grid is in ListBox ..
How can i Access The Grid Object??
Thanks and Reagrds
Yashavantha
Create a recursive method which uses System.Windows.Media.VisualTreeHelper to get all children of the page. For each child test if it's of type Grid and if it has a Tag equal to whatever you're looking for.
I have created a page where there's alot of input from the user. So the User should be able to scroll down to be able to press a Upload button. To scroll down on the page I have used a ScrollViewer outside a grid. I am able to scroll but the page keeps scrolling back after scrolling down.
Here is my code:
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanelButtom" Grid.Row="1" >
<ScrollViewer >
<Grid x:Name="ContentPanel" Background="black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="154" />
<ColumnDefinition Width="326" />
</Grid.ColumnDefinitions>
<Image Height="109" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="167" Margin="23,19,0,0" Source="{Binding Path=ImageSoruce, Mode=TwoWay}" Grid.ColumnSpan="2" />
<TextBox Height="71" HorizontalAlignment="Left" Margin="12,161,0,0" Name="nameInput" Text="{Binding Path=Name, Mode=TwoWay}" VerticalAlignment="Top" Width="430" Grid.ColumnSpan="2" />
<TextBlock Height="56" HorizontalAlignment="Left" Margin="23,134,0,0" Name="nameLabel" Text="Name" VerticalAlignment="Top" Width="130" FontSize="25" />
<TextBlock FontSize="25" Height="60" HorizontalAlignment="Left" Margin="23,238,0,0" Name="descriptionLabel" Text="Description" VerticalAlignment="Top" Width="130" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="12,265,0,0" Name="descriptionInput" Text="{Binding Path=Description, Mode=TwoWay}" VerticalAlignment="Top" Width="430" IsEnabled="True" Grid.ColumnSpan="2" />
<TextBlock FontSize="25" Height="60" HorizontalAlignment="Left" Margin="23,343,0,0" Name="locationLabel" Text="Location" VerticalAlignment="Top" Width="130" />
<TextBlock Height="46" HorizontalAlignment="Left" Margin="24,384,0,0" Name="locationInput" Text="{Binding Path=Location, Mode=TwoWay}" VerticalAlignment="Top" Width="401" Loaded="locationInput_Loaded" Grid.ColumnSpan="2" />
<toolkit:ListPicker SelectionMode="Multiple" FullModeHeader="CATEFORIES" x:Name="ListPickerCategories" CacheMode="BitmapCache" HorizontalAlignment="Left" Margin="25,492,0,0" VerticalAlignment="Top" Width="401" Grid.ColumnSpan="2" ItemsSource="{Binding Categories}" Height="78"></toolkit:ListPicker>
<TextBlock FontSize="25" Height="60" HorizontalAlignment="Left" Margin="24,436,0,0" Name="textBlock1" Text="Categories" VerticalAlignment="Top" Width="130" />
<Button Content="Upload" Height="86" HorizontalAlignment="Left" Margin="26,604,0,0" Name="UploadButton" VerticalAlignment="Top" Width="411" Click="UploadButton_Click" Grid.ColumnSpan="2" />
</Grid>
</ScrollViewer>
</Grid>
What can be the cause of this problem and how do I solve it?
Use StackPanels to put elements one below the other. Remove all your margins, height, width and other absolute positioning stuff
<Grid x:Name="ContentPanelButtom" Grid.Row="1" >
<ScrollViewer>
<StackPanel>
<!-- elements here -->
</StackPanel>
</ScrollViewer>
</Grid>
I had the same issue. but at last i solved it, i just used the Height property to do this. Please do the following steps
First create a ScrollViewer
Indide the ScrollViewer create a container(eg: Grid/StackPanel/Border etc...) and put every controlls inside it.
Set fixed Height for ScrollViewer and the Container (Note: Height of container should be greater than ScrollViewer's Height)
See the below Code
<ScrollViewer Height="500">
<Grid Name="Container" Height="700">
<TextBox/>
<TextBox/>
<TextBox/>
</Grid>
</ScrollViewer>
Now you can scroll the container Grid Even the KeyBoard shown or even focus on a TextBox.
I have a bunch of controls in a collection of stackpanels that is contained in a grid. The grid is pretty long and runs off the page so I have put it in to a scrollviewer. Everything works perfectly and I can scroll up and down my page until the keyboard is active. Once that happens, I am not able to scroll the content all the way to the bottom when a textbox is highlighted. I can scroll to a certain extent but not all the way down. Am I doing something wrong? My code is as follows:
<ScrollViewer Margin="12,0,12,0" Grid.Row="1">
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Height="837" Width="456">
<StackPanel HorizontalAlignment="Left" Width="450" Margin="0,63,0,405">
<TextBlock Height="30" Name="tBlk_Username" Text="Display Name" />
<TextBox Height="71" Name="tb_UserNameVal" Text="{Binding UserNameValue, Mode=TwoWay}" Width="452" />
<TextBlock Height="30" Name="tBlk_Email" Text="Email" />
<TextBox Height="71" Name="tb_EmailVal" Text="{Binding EmailValue, Mode=TwoWay}" Width="452" />
<TextBlock Height="30" Name="tBlk_Message" Text="Message" />
<TextBox Height="130" Name="tb_MessageVal" Text="{Binding MessageValue, Mode=TwoWay}" Width="452" />
</StackPanel>
<StackPanel Height="37" HorizontalAlignment="Left" Margin="0,519,0,0" Name="stackPanel2"
VerticalAlignment="Top" Width="450">
<TextBlock Height="30" Name="tBlk_PicInfo" Text="Include a Photo" />
</StackPanel>
<StackPanel Orientation="Horizontal" Height="90" HorizontalAlignment="Left" Margin="12,432,0,0"
Name="stackPanel1" VerticalAlignment="Top" Width="450" d:LayoutOverrides="GridBox">
<TextBox Height="71" Name="tb_Location" Text="{Binding Location}" Width="367" IsReadOnly="True" />
<Button Height="60" Name="btn_Clear" Width="60" BorderThickness="0" Background="{Binding LocationImage}" Style="{StaticResource LocationButtonStyle}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<GalaSoft_MvvmLight_Command:EventToCommand x:Name="ClearCommand" Command="{Binding ClearCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="205" HorizontalAlignment="Left" Margin="12,556,0,0"
Name="stackPanel3" VerticalAlignment="Top" Width="452" d:LayoutOverrides="GridBox">
<Image Name="img_FlickrPic" Stretch="Fill" Width="260" Source="{Binding Capture}" Margin="0,13,0,0" />
<Button Name="btn_Capture" Width="90" Height="90" Margin="0,67,0,55" BorderThickness="0">
<Button.Background>
<ImageBrush ImageSource="/Images/camera.png" />
</Button.Background>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<GalaSoft_MvvmLight_Command:EventToCommand x:Name="CaptureClick" Command="{Binding CaptureCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="100" HorizontalAlignment="Left"
Margin="4,763,0,0" Name="stackPanel4" VerticalAlignment="Top" Width="450" d:LayoutOverrides="GridBox">
<Button Content="Submit" Height="71" Name="btn_Submit" Width="130" IsEnabled="{Binding SubmitEnabled}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<GalaSoft_MvvmLight_Command:EventToCommand x:Name="SubmitCommand" Command="{Binding SubmitCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</StackPanel>
<StackPanel Height="59" HorizontalAlignment="Left" Name="stackPanel5" VerticalAlignment="Top" Width="456" Orientation="Horizontal">
<TextBlock FontFamily="{StaticResource HelveticaNeue}" Name="tBlk_StepConf" Text="Please share my " Width="150" TextAlignment="Center" Height="33" />
<TextBlock FontFamily="{StaticResource HelveticaNeue}" Foreground="#FF00BCE4" Name="tBlk_StepConfCount" Text="{Binding StepVal}" Width="56" FontSize="34" TextAlignment="Center" VerticalAlignment="Top" />
<TextBlock FontFamily="{StaticResource HelveticaNeue}" Name="tBlk_StepConfTrail" Text=" steps for water" Width="134" TextAlignment="Center" Height="40" />
</StackPanel>
</Grid>
</ScrollViewer>
The problem is that the ScrollViewer doesn't pay attention to the Soft Input Panel (or keyboard), so it only scrolls as long as it can behind the keyboard so to speak.
A simple solution is to add a margin to the bottom of the content control of the ScrollViewer.
The longer and more complicated solution is to add the margin when the SIP is displayed. Unfortunately there's no event for it, but I guess one could listen to when a textbox gains or loses focus, and set a margin or perhaps show a control at the bottom of the page when a textbox has focus (and hence the SIP is displayed) and hide it when it doesn't.
Another day another problem, this time I think with a simple issue into XAML formatting.
I have a ListPicker in a StackPanel on a XAML page in a WP7 app. Whenever I tap the ListPicker, it expands, but it appears to expand behind the item below it. If I have enough items in the list it opens in full screen mode which works fine.
Any suggestions, pointers would be appreciated;
<Grid Name="grdBought">
<StackPanel Visibility="Visible" Margin="0,0,0,0" Height="480">
<Button Name="btnSave" Grid.Row="0" Content="Save" Height="100" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="378" Click="btnSave_Click" />
<StackPanel Grid.Row="1" Orientation="Vertical">
<toolkit:ListPicker Name="CategoryPicker" Header="Select Category" HorizontalAlignment="Left" ItemsSource="{Binding Categories}" CacheMode="BitmapCache" TabIndex="0" Margin="0,0,0,0" SelectionChanged="CategoryPicker_SelectionChanged" Height="100" Width="195">
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" HorizontalAlignment="Left">
<TextBlock Text="{Binding CategoryDesc}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="{StaticResource PhoneFontSizeMediumLarge}" />
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<StackPanel Name="item" Orientation="Vertical" Margin="0, 0, 0, 0">
<TextBlock Margin="0, 0, 0, 0" Text="{Binding CategoryDesc}" FontSize="40" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
<StackPanel Name="Items" Grid.Row="1" Orientation="Horizontal">
<TextBox Name="txtDescription" Height="100" Margin="0,0,0,0" Text="" Width="225" MaxLength="100" FontSize="40" InputScope="Text" />
<TextBox Name="txtAmount" HorizontalAlignment="Left" Text="0.00" Height="100" Margin="0,0,0,0" TextAlignment="Right" FontSize="40" FontFamily="Segoe WP Semibold" Width="163" KeyUp="txtAmount_KeyUp" />
</StackPanel>
</StackPanel>
<TextBlock Name="tb1" Text="Amount" Height="27" Margin="0,0,0,0" Width="137" />
<Button Name="button1" Content="Button" Height="72" HorizontalAlignment="Left" Margin="249,0,0,0" VerticalAlignment="Top" Width="160" Click="button1_Click" />
</StackPanel>
I have been through the examples on the windowsphonegeek.com site, but I still can't make it work!
The issue is that you're setting the Height of the ListPicker to 100. Remove that, and just leave as auto. This is an issue b/c when you restrict the height, the listpicker has nowhere to expand (thus, showing the behavior you're seeing)
I guess height is creating an issue, just make sure that height of listpicker is greater than stackpanel.