I'm new to Window Mobile App Development and now I've to create the button, I have created it successfully, but the problem is it doesn't fill the edges of the button with the image i set to it.
I have set the border width and padding everything to 0 but still the issue exists and I have even checked in on the windows simulator
This is how it looks. The button should fill the image? How it can be achieved?
Here is the code:
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image HorizontalAlignment="Left" Height="218" Margin="96,27,0,0" VerticalAlignment="Top" Width="270" RenderTransformOrigin="0.504,0.514" Source="/Assets/Images/qima_logo.png"/>
<TextBox HorizontalAlignment="Left" Height="72" Margin="46,301,0,0" TextWrapping="Wrap" Text="Username" VerticalAlignment="Top" Width="366" BorderBrush="DarkGray" BorderThickness="3" TextChanged="TextBox_TextChanged" InputScope="EmailUserName" AcceptsReturn="True" />
<TextBox HorizontalAlignment="Left" Height="72" Margin="46,373,0,0" TextWrapping="Wrap" Text="Password" VerticalAlignment="Top" Width="366" BorderBrush="DarkGray" InputScope="Password"/>
<Button Content="Login" HorizontalAlignment="Left" Margin="46,450,0,0" VerticalAlignment="Top" Width="366" Height="88">
<Button.Background>
<ImageBrush ImageSource="/Assets/Images/btn_bg.png"/>
</Button.Background>
</Button>
<Button Content="Organization List" Margin="0,649,0,0" Width="455" BorderThickness="0" Padding="0" UseLayoutRounding="True" HorizontalAlignment="Right" Click="Button_Click">
<Button.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="/Assets/Images/organizations_list_btn.png" AlignmentX="Left"/>
</Button.Background>
</Button>
<Button Content="Membership List" HorizontalAlignment="Left" Margin="0,580,0,0" VerticalAlignment="Top" Width="456" Foreground="White">
<Button.BorderBrush>
<ImageBrush Stretch="UniformToFill" ImageSource="/Assets/Images/members_list_btn.png"/>
</Button.BorderBrush>
<Button.Background>
<ImageBrush ImageSource="/Assets/Images/members_list_btn.png" Stretch="UniformToFill"/>
</Button.Background>
</Button>
<Image HorizontalAlignment="Left" Height="42" Margin="46,533,0,0" VerticalAlignment="Top" Width="400" Source="/Assets/Images/members_list_btn.png" Stretch="Fill">
<Image.OpacityMask>
<ImageBrush ImageSource="/Assets/Images/members_list_btn.png"/>
</Image.OpacityMask>
</Image>
</Grid>
Related
I have created a pivot control to show all data from my database by using binding data. And the code for the pivot control look like this. And the UI view here: photo
I want to solve the problem: After I tap on an item of listbox (of pivot control), I will get the name of the item.
Note: All controls have no name (x:name). I am trying to use Tag="{Binding CHUPHONG}" replace for x:name.
Could you show me the way to solve that? Or Where I am wrong? Thanks so much!
<controls:PivotItem Header="PHÒNG CHƠI" FontSize="19" Margin="0" Background="{x:Null}">
<ListBox x:Name="listDSPhong">
<ListBox.ItemTemplate>
<DataTemplate>
<toolkit:WrapPanel Height="120" Width="480" Margin="0,10,0,20">
<Image HorizontalAlignment="Left" Height="120" VerticalAlignment="Top" Width="120" Source="/LuanVanDeMo;component/xephinhlogo.png"/>
<TextBlock Margin="4,44,-98,44" TextWrapping="Wrap" Text="Chủ phòng:" HorizontalAlignment="Left"/>
<TextBlock Height="32" Margin="0,5,-98,0" TextWrapping="Wrap" Text="Tên phòng:" VerticalAlignment="Top" HorizontalAlignment="Left" Width="98"/>
<TextBlock Margin="0,0,-98,4" TextWrapping="Wrap" Text="Số lượng:" Height="32" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="98"/>
<TextBlock Margin="102,44,-242,44" TextWrapping="Wrap" Text="{Binding TENPHONG}" Width="140" Height="32" HorizontalAlignment="Left"/>
<TextBlock Height="32" Margin="102,5,-242,0" TextWrapping="Wrap" VerticalAlignment="Top" Text="{Binding CHUPHONG}" Width="140" HorizontalAlignment="Left"/>
<TextBlock Margin="102,0,-134,4" TextWrapping="Wrap" Height="32" VerticalAlignment="Bottom" Text="{Binding SOLUONG}" Width="32" HorizontalAlignment="Left"/>
<Image HorizontalAlignment="Left" Width="50" Source="/LuanVanDeMo;component/Images/Buttons/lock.png" Margin="285,35,0,35" Height="50"/>
</toolkit:WrapPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PivotItem>
</controls:Pivot>
ItemContainerGenerator.ContainerFromIndex(SelectedIndex);
Fetching Selected Item
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
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.