So I struggle with the XAML alignment a bit and I hoped for someone who could help me get trough it.
This is the Code. I will break it down below:
<Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="0">
<StackPanel>
<Button Style="{StaticResource AppBarButtonStyle}" Click="ShowPopupOffsetClicked"/>
<Image Source="Assets/images/icon_thumbnail.png"></Image>
</StackPanel>
<Popup VerticalOffset="60" HorizontalOffset="0" x:Name="StandardPopup">
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="300" Height="350">
<StackPanel >
<TextBlock>
<Run x:Name="MyRun" Text=""/>
</TextBlock>
<StackPanel Orientation="Horizontal">
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBox x:Name="searchTextBox" Width="200" Height="30" />
</StackPanel>
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Top">
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</StackPanel>
</Border>
</Popup>
</Grid>
This part will be MyRun Text later:
<TextBlock>
<Run x:Name="MyRun" Text=""/>
</TextBlock>
This part is the SearchBar and the search-button which should be perfectly in line. How do I do this?
<StackPanel Orientation="Horizontal">
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBox x:Name="searchTextBox" Width="200" Height="30" />
</StackPanel>
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Top">
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
</StackPanel>
This is the next and previous button. It should be perfectly in line with MyRun. How would I do that?
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
And at last will be the "Close" Button. I guess it is kinda already perfect?:
<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
Now a screenshot of how it Looks like and how I want it to look:
This is how it is:
This is how I want it to be:
I know that I can Change the height of the popup. But when I Change the height some Things disappear (for example the close Botton won't be visible because it is too far down while the popup height is too low).
Sorry for the long post. I hope someone can help me out here.
You should be able to use a Grid with three RowDefinitions. Something like this:
<Popup VerticalOffset="60" HorizontalOffset="0" x:Name="StandardPopup">
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="300" Height="350">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- row 1 -->
<StackPanel Orientation="Horizontal">
<TextBox x:Name="searchTextBox" Width="200" Height="30" Margin="0,0,3,0" />
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
<!-- row 2 -->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
<TextBlock Grid.Column="1" HorizontalAlignment="Center">
<Run x:Name="MyRun" Text=""/>
</TextBlock>
</Grid>
<!-- row 3 -->
<Button Grid.Row="2"
Content="Close" Click="ClosePopupClicked"
HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</Grid>
</Border>
</Popup>
You can adjust the space between the controls using the Margin property.
Related
I am testing out the keypad & textblock binding based on the UWP sample PhoneCall.
However when I run my code when pressing on the keypad, the key-pressed doesn't print on the textblock.
I did some changes from sample code. I have added ViewModels & Helpers from the samples.
Can advise where did I do wrong?
Thanks.
My XAML code as follow;
<TextBlock x:Name="KeypadDisplay" FontSize="50" TextAlignment="Right"
Text="{Binding DialerPhoneNumber.NumberToDial, Mode=OneWay}"
VerticalAlignment="Top" HorizontalAlignment="Left" Height="80" Width="300" Margin="70,20,0,0">
</TextBlock>
<Button Grid.Column="1" Grid.Row="1"
Command="{Binding ProcessDialPad}" Style="{StaticResource TextBlockButtonStyle}"
CommandParameter="1" Tag="1" HorizontalAlignment="Center" Height="30" Width="100">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<TextBlock Text="1" FontSize="18" FontWeight="Bold" Style="{StaticResource BodyTextBlockStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="2" Grid.Row="1"
Command="{Binding ProcessDialPad}" Style="{StaticResource TextBlockButtonStyle}"
CommandParameter="2" Tag="2" HorizontalAlignment="Center" Height="30" Width="100">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<TextBlock Text="2" FontSize="18" FontWeight="Bold" Style="{StaticResource BodyTextBlockStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="3" Grid.Row="1"
Command="{Binding ProcessDialPad}" Style="{StaticResource TextBlockButtonStyle}"
CommandParameter="3" Tag="3" HorizontalAlignment="Center" Height="30" Width="100">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<TextBlock Text="3" FontSize="18" FontWeight="Bold" Style="{StaticResource BodyTextBlockStyle}"/>
</StackPanel>
</Button>
Update - 03-07-2019
The processdialpad routine is as follow
public ICommand ProcessDialPad
{
get
{
if (dialPadCommand == null)
{
dialPadCommand = new RelayCommand(
this.DialPadInvoked);
}
return dialPadCommand;
}
}
I guess you miss setting the DataContext for the page to bind the model. Please check if you add the following code in your page.
DataContext = ViewModelDispatcher.DialerViewModel;
Following code works fine for me. Here i used the same code in ViewModels and Helpers from sample PhoneCall.
MainPage.xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" HorizontalAlignment="Stretch">
<Border Background="BlueViolet">
<TextBlock x:Name="KeypadDisplay" FontSize="50" TextAlignment="Right" Foreground="White"
Text="{Binding DialerPhoneNumber.NumberToDial, Mode=OneWay}"
VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="100">
</TextBlock>
</Border>
</StackPanel>
<StackPanel Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="600">
<Grid.RowDefinitions>
<RowDefinition Height="12" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="12" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="12" />
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Grid.Row="1"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="1" Tag="1" Holding="OnDialPadHolding">
<StackPanel Orientation="Vertical">
<TextBlock Text="1" Style="{StaticResource DialpadNumberStyle}"/>
<FontIcon FontFamily="Segoe MDL2 Assets"
FontWeight="ExtraLight"
Glyph=""
RenderTransformOrigin="0.5,0.5"
Height="14.8">
<FontIcon.RenderTransform>
<CompositeTransform ScaleX="1" ScaleY="1"/>
</FontIcon.RenderTransform>
</FontIcon>
</StackPanel>
</Button>
<Button Grid.Column="2" Grid.Row="1"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="2">
<StackPanel Orientation="Vertical">
<TextBlock Text="2" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="ABC" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="3" Grid.Row="1"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="3">
<StackPanel Orientation="Vertical">
<TextBlock Text="3" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="DEF" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="1" Grid.Row="2"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="4">
<StackPanel Orientation="Vertical">
<TextBlock Text="4" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="GHI" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="2" Grid.Row="2"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="5">
<StackPanel Orientation="Vertical">
<TextBlock Text="5" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="JKL" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="3" Grid.Row="2"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="6">
<StackPanel Orientation="Vertical">
<TextBlock Text="6" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="MNO" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="1" Grid.Row="3"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="7">
<StackPanel Orientation="Vertical">
<TextBlock Text="7" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="PQRS" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="2" Grid.Row="3"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="8">
<StackPanel Orientation="Vertical">
<TextBlock Text="8" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="TUV" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="3" Grid.Row="3"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="9">
<StackPanel Orientation="Vertical">
<TextBlock Text="9" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="WXYZ" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="1" Grid.Row="4"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="*" Tag="," Holding="OnDialPadHolding">
<StackPanel Orientation="Vertical">
<TextBlock Text="*" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="," Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="2" Grid.Row="4"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="0" Tag="+" Holding="OnDialPadHolding">
<StackPanel Orientation="Vertical">
<TextBlock Text="0" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text="+" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
<Button Grid.Column="3" Grid.Row="4"
Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
CommandParameter="#" Tag=";" Holding="OnDialPadHolding">
<StackPanel Orientation="Vertical">
<TextBlock Text="#" Style="{StaticResource DialpadNumberStyle}"/>
<TextBlock Text=";" Style="{StaticResource DialpadLetterStyle}"/>
</StackPanel>
</Button>
</Grid>
</StackPanel>
</Grid>
MainPage.cs
public MainPage()
{
this.InitializeComponent();
DataContext = ViewModelDispatcher.DialerViewModel;
}
/// <summary>
/// Processes press and hold for the buttons that supports press and hold. E.g
/// 1 -> Voicemail
/// 0 -> +
/// * -> , (pause)
/// # -> ; (wait)
/// </summary>
private void OnDialPadHolding(object sender, Windows.UI.Xaml.Input.HoldingRoutedEventArgs e)
{
Button button = (Button)sender;
DialerViewModel vm = (DialerViewModel)DataContext;
if ((vm != null) && (e.HoldingState == Windows.UI.Input.HoldingState.Started))
{
vm.ProcessDialPadHolding.Execute(button.Tag);
}
}
I dont quite understand how to make a simple ContentDialog. Basically I want to have a button that when pressed the ContentDialog Pops up. The ContentDialog should have at least 1 Button. I guess Im missing out something. I tried to put my part of the Code into it but there is an error when it Comes to build the program. My guess is that I still have to enter something in the XAML to make it work. This is the default Code of the .XAML (at the Bottom of the post you find the Code I want to put into it):
<Page
x:Class="PDFViewerSDK_Win10.PDFReaderPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PDFViewerSDK_Win10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" SizeChanged="OnSizeChanged">
<Page.Resources>
<DataTemplate x:Key="MenuItemTemplate">
<Grid HorizontalAlignment="Left" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Margin="0,0,0,0" Orientation="Vertical">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource ApplicationForegroundThemeBrush}" Width="300" VerticalAlignment="Center" Text="{Binding Title}" HorizontalAlignment="Left" FontFamily="Segoe UI"/>
</StackPanel>
</Grid>
</DataTemplate>
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="68"/>
<RowDefinition Height="*"/>
<RowDefinition Height="0.35*"/>
</Grid.RowDefinitions>
<Canvas x:Name="mPDFView" Grid.RowSpan="3"/>
<Canvas x:Name="mPDFThumb" Grid.Row="2" Visibility="Visible"/>
<ListView x:Name="mMenuView"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="0, 68, 0, 0"
ItemTemplate="{StaticResource MenuItemTemplate}"
IsItemClickEnabled="True"
ItemClick="OnMenuListItemClicked"
Visibility="Collapsed"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
Grid.RowSpan="2"/>
<Grid Height="68" Margin="0" VerticalAlignment="Top" Background="#7FC0C0C0" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel HorizontalAlignment="Left" Grid.Column="0" Orientation="Horizontal">
<Button x:Name="backButton" Click="OnBtnGoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" Margin="10,10,0,0" Foreground="Black" BorderBrush="Black" Background="Black" AllowDrop="True" VerticalAlignment="Top" RenderTransformOrigin="-1.62,0.618"/>
<Button x:Name="searchBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="Assets/images/view_search.png"/>
</Button>
<Button x:Name="viewAnnotBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="Assets/images/annot_line.png"/>
</Button>
<Button x:Name="doneAnnotBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" Visibility="Collapsed">
<Image Source="Assets/images/annot_done.png"/>
</Button>
<Button x:Name="removeAnnotBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" Visibility="Collapsed">
<Image Source="Assets/images/annot_remove.png"/>
</Button>
<Button x:Name="selectBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<!--Image Source="Assets/images/icon_select.png"/-->
<BitmapIcon Name="mSelectIcon" UriSource="ms-appx:///Assets/images/icon_select.png" />
</Button>
<Button x:Name="viewMenuBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="Assets/images/icon_menu.png"/>
</Button>
<TextBox x:Name="mPageInput" Width="90" Margin="30,10,5,10" FontSize="30" KeyDown="OnKeyDown"/>
<TextBlock x:Name="mPageDisplay" Width="90" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30" Margin="0,10,0,10"/>
<Button x:Name="settingsBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="Assets/images/icon_setting.png"/>
</Button>
<Button x:Name="thumbnailBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnThumbItemTapped">
<Image Source="Assets/images/icon_thumbnail.png"/>
</Button>
<Image Source="Assets/images/icon_menu.png"/>
</StackPanel>
<StackPanel HorizontalAlignment="Right" Grid.Column="1" Orientation="Horizontal">
<Button x:Name="viewInfoBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="Assets/images/view_about.png"/>
</Button>
</StackPanel>
</Grid>
</Grid>
<Page.BottomAppBar>
<AppBar x:Name="mAppBar">
<Grid x:Name="PDFOptionPanel"/>
</AppBar>
</Page.BottomAppBar>
</Page>
Now where do I have to put this part of the Code? Do I have to add something? What am I missing here?
<ContentDialog x:Name="test" PrimaryButtonText="Ok" SecondaryButtonText="Cancel" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" </ContentDialog>
Derive from official document,
Use a ContentDialog to request input from the user, or to show information in a modal dialog. You can add a ContentDialog to an app page using code or XAML, or you can create a custom dialog class that's derived from ContentDialog. Both ways are shown in the examples section of this topic.
There are many ways could integrate ContentDialog to page, If you just make a simple ContentDialog, you could implement it in code behind.
private async void DisplayNoWifiDialog()
{
ContentDialog noWifiDialog = new ContentDialog()
{
Title = "No wifi connection",
Content = "Check connection and try again.",
CloseButtonText = "Ok"
};
await noWifiDialog.ShowAsync();
}
If you want implement it with xaml, please put your ContentDialog in the bottom of the root Grid. for example:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="This is ContentDialog"/>
<Button Click="Button_Click" Content="ClickMe"/>
<ContentDialog x:Name="test" PrimaryButtonText="Ok" SecondaryButtonText="Cancel" Tapped="OnOptionItemTapped" ></ContentDialog>
</Grid>
Please note, the ContentDialog that you provided missed > end mark. For more info please refer this.
This is a general question and I am looking for a workaround.
Is there a way to create a TextBox item inside a PanoramaItem?
This is my PanoramaItem:
<phone:PanoramaItem x:Name="Panorama2" Header="Ringtones">
<!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
<phone:LongListSelector Margin="0,-38,0,100" ItemsSource="{Binding Items2}" Tap="LongListSelector_Tap">
<phone:LongListSelector.ListHeaderTemplate>
<DataTemplate>
<Grid Margin="12,0,0,38">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</Grid>
</DataTemplate>
</phone:LongListSelector.ListHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432">
<StackPanel Width="311" Margin="8,-7,0,0">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}" />
</StackPanel>
<Image Source="{Binding PlayPhoto}" Width="50" Height="50" HorizontalAlignment="Left" Tap="Image_Tap_1"/>
<Image Source="{Binding DownloadPhoto}" Width="40" Height="40" HorizontalAlignment="Right" Tap="Image_Tap"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
This is how the PanoramaItem looks like:
I want to add a TextBox where indicated in the picture. Is it possible? If yes how? I have looked in most of the options of PanoramaItems and couldn't find TextBox item.
Try this xaml, i think you need to achieve this
<phone:PanoramaItem x:Name="Panorama2" Header="Ringtones" Margin="0,72,0,0">
<!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
<StackPanel>
<phone:LongListSelector Height="362" Margin="0,-38,0,100" ItemsSource="{Binding Items2}" Tap="LongListSelector_Tap">
<phone:LongListSelector.ListHeaderTemplate>
<DataTemplate>
<Grid Margin="12,0,0,38">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</Grid>
</DataTemplate>
</phone:LongListSelector.ListHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432">
<StackPanel Width="311" Margin="8,-7,0,0">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}" />
</StackPanel>
<Image Source="{Binding PlayPhoto}" Width="50" Height="50" HorizontalAlignment="Left" Tap="Image_Tap_1"/>
<Image Source="{Binding DownloadPhoto}" Width="40" Height="40" HorizontalAlignment="Right" Tap="Image_Tap"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
<TextBox Text="sfg"/>
</StackPanel>
</phone:PanoramaItem>
I have a ListView of ToggleButtons. Every button is binded to a Popup window.
Every Popup window is being opened at the same place as the button, but I want it to be at the same place as the first button.
Here is the code and images:
The buttons:
This is what happens when the first button is open:
This is what happens when the second button is open:
<ListView x:Name="ListOfRecipes" HorizontalAlignment="Center" VerticalAlignment="Top" ItemsSource="{Binding}" Grid.Row="1" Margin="25,0.333,25,35" ScrollViewer.VerticalScrollMode="Enabled" Grid.RowSpan="5" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="90*" />
<RowDefinition Height="150*" />
<RowDefinition Height="0*" />
</Grid.RowDefinitions>
<ToggleButton x:Name="RecipeButton" Grid.Row="1" BorderBrush="#FF65C365" VerticalAlignment="Center" HorizontalAlignment="Center" Click="Button_Click" Height="150" Width="328" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Height="128" Width="328">
<Image Source="{Binding Path=ImageUri}" Height="128" Width="128" Margin="0,6,0,-5.667" />
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" Height="128" Width="192">
<TextBlock Height="25" Width="190" Foreground="#FF6FDC13" Text="{Binding Name}" VerticalAlignment="Top" />
<Image Name="YesOrNoImage" Source="{Binding Path=YesOrNoImage}" Width="102" Height="102" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</StackPanel>
</StackPanel>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=RecipeButton, Mode=TwoWay}" Height="0" Width="328" VerticalAlignment="Center" Name="PopupOne" IsLightDismissEnabled="True" IsHoldingEnabled="False" ScrollViewer.VerticalScrollMode="Enabled" Visibility="{Binding IsChecked, ElementName=RecipeButton}">
<Border BorderBrush="#FF65C365" BorderThickness="1" Background="White" Height="514" Width="328">
<ScrollViewer VerticalScrollMode="Enabled" >
<StackPanel Orientation="Vertical" ScrollViewer.VerticalScrollMode="Enabled">
<Image Source="{Binding Path=ImageUri}" Height="328" Width="328" />
<TextBlock Foreground="#FF6FDC13" Text="{Binding Name}" HorizontalAlignment="Left" FontSize="28" />
<TextBlock Foreground="Black" Text="{Binding RecipeText}" HorizontalAlignment="Left" FontSize="18" />
</StackPanel>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In the popup you can define a grid and set the popup height there
Something like this:
<Popup x:Name="resultsPopup"
AllowsTransparency="True"
IsOpen="{Binding IsResultsPopupOpen,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
Placement="Bottom"
PlacementTarget="{Binding ElementName=SearchBox}"
StaysOpen="False">
<Grid Width="{Binding ActualWidth,
ElementName=SearchBox}"
Height="300">
</Grid>
</Popup>
UPDATE:
You can place the popup wherever you want with the Placement property as shown above, the set the binding of the "PlacementTarget" to the control you want to bind.
In the example above the popup will be shown below the UI control named SearchBox
In my WPF application, i created a dockpanel with a stackpanel with orientation=horizontal.
I add some buttons on my stackpanel ( like a toolbar)
I would like to be able to set my last item on my stackpanel to be attached to the right of my window.
Some picture in order to explain.
What i have :
What i would to have :
Here is my XAML :
<DockPanel Height="40" VerticalAlignment="Top" >
<Border>
<StackPanel Orientation="Horizontal" Background="{StaticResource DegradeCouleurTheme}">
<Image Source="ElipseGauche.png" Height="28" Margin="10,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Goto_Premier">
<Image Source= "xRtDiva_XWPF_TBR_PREMIER.PNG_IMAGES.png" Height="16"/>
</Button>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Goto_Precedent">
<Image Source= "xRtDiva_XWPF_TBR_PRECED.PNG_IMAGES.png" Height="16"/>
</Button>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Goto_Suivant">
<Image Source= "xRtDiva_XWPF_TBR_SUIVANT.PNG_IMAGES.png" Height="16"/>
</Button>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Goto_Dernier">
<Image Source= "xRtDiva_XWPF_TBR_DERNIER.PNG_IMAGES.png" Height="16"/>
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
<Image Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Creer" >
<Image Source= "Toolbar_Creer.png" Height="16" />
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
<Image Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Evenement_Supprimer">
<Image Source= "Toolbar_Supprimer.png" Height="16"/>
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
<Image Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Evenement_Joints">
<Image Source= "Toolbar_FicJoints.png" Height="18"/>
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
<Image Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Evenement_Annuler" >
<Image Source= "Toolbar_Annuler.png" Height="16"/>
</Button>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Evenement_Valider">
<Image Source= "Toolbar_Valider.png" Height="16"/>
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
<Image Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_App_Parametrer" >
<Image Source= "Toolbar_Parametrer.png" Height="16"/>
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
<Grid HorizontalAlignment="Right">
<StackPanel Orientation="Horizontal" Height="28" >
<Image Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_About" >
<Label Margin="0,0,0,1" Foreground="White" Content="About" Height="16" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0,0,0,0"/>
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
</StackPanel>
</Grid>
</StackPanel>
</Border>
</DockPanel>
I tried to use a grid with horizontalaligneemnt = right on the last item of my stackpanel but it has no effect ( and it's logic !)
Anyone could help me please ?
Thanks a lot :)
You can not do this with a StackPanel. You will need to use a DockPanel or Grid instead.
You can use Grid and Grid children to attack Objecs on the direction: Left, Right, Tip, Bottom and Center.
I did a example with two images on Bottom left and Bottom right:
<Window x:Class="NameClass">
<Grid Name="Grid 1">
<Grid Name="Grid 1.1" VerticalAlignment="Bottom">
<Grid Name="Grid 1.1.1" HorizontalAlignment="Left">
<StackPanel>
<StackPanel Orientation="Horizontal">
<Image HorizontalAlignment="Left" Source="/left.jpg"/>
</StackPanel>
</StackPanel>
</Grid>
<Grid Name="Grid 1.1.2" HorizontalAlignment="Right">
<StackPanel>
<StackPanel Orientation="Horizontal">
<Image HorizontalAlignment="Right" Source="/right.jpg"/>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</Grid>
</Window>
Structure explained:
Grid 1 is Main Grid.
Grid 1.1 to the desired the main address, in this case is Bottom.
Grid 1.1.1 and Grid 1.1.2 contain the specific addresses to each <Image>. For this case the StackPanel are used.
<StackPanel/> is the main container to fill the Grid 1.1.x.
<StackPanel Orientation="Horizontal"/> to use only one row
<Image HorizontalAlignment={one direction}/> to locate on the bottom grid, can be on right, left or center.
Result:
PD: I used this video for understand the concept on XAML WPF. Stack Panels & Dock Panels. I found a solution, with trial and error.
You can do this by using in StackPanel
Orientation="Horizontal"