Creating 3D road like effect in windows 8 [closed] - windows-runtime

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
How to create a 3d road like effect in windows 8 using Direct X & Xaml. Can anyone help me or guide me to create a road like effect in windows 8. I am attaching something similar sample image along with this.
Or If it is possible to repressed the same in xaml & C#. Guide me in that way. Because I am more confirmable in that technology. I am not an active developer of Direct X. Also I a not looking for a "Do that for me" approach. I need only guidelines or some sample reference that help me to implement the same.

So, this is going to be tricky. I want to point you to the MatrixTransform. The only way to accomplish what you are wanting to do. It's no small feat. Some of the capabilities of the MatrixTransform have been wrapped in a helper class called ProjectionPlane, but it doesn't give you the pinch look your graphic indicates. Given the out-of-the-box ProjectionPanel, I think something like this is the best you will be able to accomplish.
Remember, the MatrixTransform can do it. But it's going to be some work. Work, like I am sure, it took to create the graph you are wanting to emulate. Awesome doesn't come free.
<Grid Background="Black" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="728" />
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid x:Name="BackgroundGrid" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,-282" Grid.RowSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RenderTransform>
<CompositeTransform ScaleX="0.75" ScaleY="0.75" TranslateY="-250"/>
</Grid.RenderTransform>
<Grid.Projection>
<PlaneProjection RotationX="-29"/>
</Grid.Projection><Rectangle Fill="Gainsboro" Grid.Column="0" />
<Rectangle Fill="Gainsboro" Grid.Column="2" />
<Rectangle Fill="Gainsboro" Grid.Column="4" />
<Rectangle Fill="Gainsboro" Grid.Column="6" />
<Rectangle Fill="Gainsboro" Grid.Column="8" />
<Rectangle Fill="Gainsboro" Grid.Column="10" />
<Rectangle Fill="Gainsboro" Grid.Column="12" />
<Rectangle Fill="Gainsboro" Grid.Column="14" />
<Rectangle Fill="Gainsboro" Grid.Column="16" />
<Rectangle Fill="Gainsboro" Grid.Column="18" />
<Rectangle Fill="Gainsboro" Grid.Column="20" />
<Rectangle Fill="Gray" Grid.Column="1" />
<Rectangle Fill="Gray" Grid.Column="3" />
<Rectangle Fill="Gray" Grid.Column="5" />
<Rectangle Fill="Gray" Grid.Column="7" />
<Rectangle Fill="Gray" Grid.Column="9" />
<Rectangle Fill="Gray" Grid.Column="11" />
<Rectangle Fill="Gray" Grid.Column="13" />
<Rectangle Fill="Gray" Grid.Column="15" />
<Rectangle Fill="Gray" Grid.Column="17" />
<Rectangle Fill="Gray" Grid.Column="19" />
</Grid>
<ScrollViewer x:Name="ForegroundGrid" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,-282">
<ScrollViewer.RenderTransform>
<CompositeTransform ScaleX="0.75" ScaleY="0.75" TranslateY="-230"/>
</ScrollViewer.RenderTransform>
<ScrollViewer.Projection>
<PlaneProjection RotationX="-29"/>
</ScrollViewer.Projection>
<Grid>
<Grid.Resources>
<Style TargetType="Ellipse">
<Setter Property="Height" Value="50" />
<Setter Property="Width" Value="50" />
<Setter Property="Fill" Value="Green" />
<Setter Property="VerticalAlignment" Value="Top" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Ellipse Margin="0,1040,0,0" Grid.Column="0" />
<Ellipse Margin="0,1240,0,0" Grid.Column="3" />
<Ellipse Margin="0,550,0,0" Grid.Column="4" />
<Ellipse Margin="0,350,0,0" Grid.Column="4" />
<Ellipse Margin="0,600,0,0" Grid.Column="7" />
<Ellipse Margin="0,1450,0,0" Grid.Column="11" />
<Ellipse Margin="0,650,0,0" Grid.Column="13" />
<Ellipse Margin="0,1150,0,0" Grid.Column="13" />
<Ellipse Margin="0,450,0,0" Grid.Column="14" />
<Ellipse Margin="0,1250,0,0" Grid.Column="17" />
<Ellipse Margin="0,550,0,0" Grid.Column="18" />
</Grid>
</ScrollViewer>
<Grid x:Name="BottomGrid" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Rectangle Fill="Orange" Grid.Column="0" />
<Rectangle Fill="Orange" Grid.Column="2" />
<Rectangle Fill="Orange" Grid.Column="4" />
<Rectangle Fill="Orange" Grid.Column="6" />
<Rectangle Fill="Orange" Grid.Column="8" />
<Rectangle Fill="Orange" Grid.Column="10" />
<Rectangle Fill="Orange" Grid.Column="12" />
<Rectangle Fill="Orange" Grid.Column="14" />
<Rectangle Fill="Orange" Grid.Column="16" />
<Rectangle Fill="Orange" Grid.Column="18" />
<Rectangle Fill="Orange" Grid.Column="20" />
<Rectangle Fill="Chocolate" Grid.Column="1" />
<Rectangle Fill="Chocolate" Grid.Column="3" />
<Rectangle Fill="Chocolate" Grid.Column="5" />
<Rectangle Fill="Chocolate" Grid.Column="7" />
<Rectangle Fill="Chocolate" Grid.Column="9" />
<Rectangle Fill="Chocolate" Grid.Column="11" />
<Rectangle Fill="Chocolate" Grid.Column="13" />
<Rectangle Fill="Chocolate" Grid.Column="15" />
<Rectangle Fill="Chocolate" Grid.Column="17" />
<Rectangle Fill="Chocolate" Grid.Column="19" />
<Grid HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Grid.ColumnSpan="2">
<Grid RenderTransformOrigin="0.5,0.5" Margin="0,0,-1266,-950">
<Grid.Resources>
<Style TargetType="Ellipse">
<Setter Property="Height" Value="50" />
<Setter Property="Width" Value="50" />
<Setter Property="Fill" Value="Green" />
<Setter Property="VerticalAlignment" Value="Top" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RenderTransform>
<CompositeTransform ScaleX="0.75" ScaleY="0.75" TranslateY="-250"/>
</Grid.RenderTransform>
<Grid.Projection>
<PlaneProjection RotationX="-29"/>
</Grid.Projection>
<Ellipse Margin="0,040,0,0" Grid.Column="0" />
<Ellipse Margin="0,240,0,0" Grid.Column="3" />
<Ellipse Margin="0,550,0,0" Grid.Column="4" />
<Ellipse Margin="0,350,0,0" Grid.Column="4" />
<Ellipse Margin="0,600,0,0" Grid.Column="7" />
<Ellipse Margin="0,450,0,0" Grid.Column="11" />
<Ellipse Margin="0,650,0,0" Grid.Column="13" />
<Ellipse Margin="0,250,0,0" Grid.Column="13" />
<Ellipse Margin="0,450,0,0" Grid.Column="14" />
<Ellipse Margin="0,250,0,0" Grid.Column="17" />
<Ellipse Margin="0,550,0,0" Grid.Column="18" />
</Grid>
</Grid>
</Grid>
</Grid>
You'll likely have the best luck doing this as DX and not XAML. But if you don't know DX then you can hit the XAML solution which will be awesome when you get it. I am sure.
Best of luck!

Related

How can I fill xamarin forms gridview data from database with horizontal scrolling

Whenever I load Data from mysql database (remotely), it loads fine but the 20 columns can't fit on potrait view. It tends to push the extra columns to new row, making the gridview disorganized.
How can I make the whole 20 columns appear on one horizontal row with a scrolling feature (horizontal)
All the related properties in xaml seam irresponsive. Thanks.
You can do this if you add the Grid inside ScrollView and set the Orientation property to Horizontal
Like this
<ContentPage.Content>
<ScrollView Orientation="Horizontal" VerticalOptions="Center">
<Grid VerticalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Grid.Column="0" Text="Button1" BackgroundColor="MediumSeaGreen" />
<Button Grid.Column="1" Text="Button2" />
<Button Grid.Column="2" Text="Button3" BackgroundColor="DodgerBlue" />
<Button Grid.Column="3" Text="Button4" />
<Button Grid.Column="4" Text="Button5" BackgroundColor="CadetBlue" />
</Grid>
</ScrollView>
</ContentPage.Content>
Result

Scrollviewer in UWP app not working

I have a page in landscape mode, set in code with the next line:
DisplayInformation.AutoRotationPreferences = DisplayOrientations.LandscapeFlipped | DisplayOrientations.Landscape;
Following is code for full screen mode:
Windows.UI.ViewManagement.ApplicationView view = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView();
view.TryEnterFullScreenMode();
In my scrollviewer, I want to include some dynamically created charts from syncfusion package. I thought this was the problem but after a while, I tried creating some rows in a grid with just textblocks so I could try the scrollviewer and it doesn't work either.
This is all my page content (except page and page.resources content) :
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Background="{StaticResource AccentBrush}" Grid.Row="0" Margin="0,0,0,10">
<TextBlock Name="Statistic_name" HorizontalAlignment="Center" FontSize="23" Text="Estadísticas"/>
</StackPanel>
<StackPanel Grid.Row="1" Margin="15,0,15,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ComboBox Grid.Column="0" Name="Combo_device" PlaceholderText="Contenedor" SelectionChanged="Combo_device_SelectionChanged" />
<ComboBox Grid.Column="1" Name="Combo_sensor" PlaceholderText="Sensor" />
<ComboBox Grid.Column="2" Name="Combo_number" PlaceholderText="Número" />
<!-- SelectionChanged="Combo_number_SelectionChanged" -->
<Button Name="Show_data" Grid.Column="3" Click="Show_data_Button_Click" Content="Cargar Datos"/>
</Grid>
</StackPanel>
<StackPanel Grid.Row="2">
<ScrollViewer Margin="20,20,20,20" Name="Scroll_container" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" >
<Grid Name="Stack_panel_scroll_statistics">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0">Hola 0</TextBlock>
<TextBlock Grid.Row="1">Hola 1</TextBlock>
<TextBlock Grid.Row="2">Hola 2</TextBlock>
<TextBlock Grid.Row="3">Hola 3</TextBlock>
<TextBlock Grid.Row="4">Hola 4</TextBlock>
<TextBlock Grid.Row="5">Hola 5</TextBlock>
<TextBlock Grid.Row="6">Hola 6</TextBlock>
<TextBlock Grid.Row="7">Hola 7</TextBlock>
<TextBlock Grid.Row="8">Hola 8</TextBlock>
<TextBlock Grid.Row="9">Hola 9</TextBlock>
<TextBlock Grid.Row="10">Hola 10</TextBlock>
<TextBlock Grid.Row="11">Hola 11</TextBlock>
<TextBlock Grid.Row="12">Hola 12</TextBlock>
<TextBlock Grid.Row="13">Hola 13</TextBlock>
<TextBlock Grid.Row="14">Hola 14</TextBlock>
<TextBlock Grid.Row="15">Hola 15</TextBlock>
<TextBlock Grid.Row="16">Hola 16</TextBlock>
<TextBlock Grid.Row="17">Hola 17</TextBlock>
</Grid>
</ScrollViewer>
</StackPanel>
</Grid>
Can somebody tell me where the error is?
I tried by modifying the code a lot and the result is always the same. I thought it was because the content was dynamically created in C# part but after trying with textblocks, it doesn't seem to be the case.
Change the <RowDefinition Height="auto"/> for Grid.Row=2 which encloses your scrollViewer to <RowDefinition Height="*"/> or specify a minimum height for your scrollviewer.
EDIT
Remove Stackpanel also and just simply use a Scrollviewer
Working Code
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="0,0,0,10">
<TextBlock Name="Statistic_name" HorizontalAlignment="Center" FontSize="23" Text="Estadísticas"/>
</StackPanel>
<StackPanel Grid.Row="1" Margin="15,0,15,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ComboBox Grid.Column="0" Name="Combo_device" PlaceholderText="Contenedor" />
<ComboBox Grid.Column="1" Name="Combo_sensor" PlaceholderText="Sensor" />
<ComboBox Grid.Column="2" Name="Combo_number" PlaceholderText="Número" />
<!-- SelectionChanged="Combo_number_SelectionChanged" -->
<Button Name="Show_data" Grid.Column="3" Content="Cargar Datos"/>
</Grid>
</StackPanel>
<ScrollViewer Grid.Row="2" Margin="20,20,20,20" Name="Scroll_container" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" >
<Grid Name="Stack_panel_scroll_statistics">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0">Hola 0</TextBlock>
<TextBlock Grid.Row="1">Hola 1</TextBlock>
<TextBlock Grid.Row="2">Hola 2</TextBlock>
<TextBlock Grid.Row="3">Hola 3</TextBlock>
<TextBlock Grid.Row="4">Hola 4</TextBlock>
<TextBlock Grid.Row="5">Hola 5</TextBlock>
<TextBlock Grid.Row="6">Hola 6</TextBlock>
<TextBlock Grid.Row="7">Hola 7</TextBlock>
<TextBlock Grid.Row="8">Hola 8</TextBlock>
<TextBlock Grid.Row="9">Hola 9</TextBlock>
<TextBlock Grid.Row="10">Hola 10</TextBlock>
<TextBlock Grid.Row="11">Hola 11</TextBlock>
<TextBlock Grid.Row="12">Hola 12</TextBlock>
<TextBlock Grid.Row="13">Hola 13</TextBlock>
<TextBlock Grid.Row="14">Hola 14</TextBlock>
<TextBlock Grid.Row="15">Hola 15</TextBlock>
<TextBlock Grid.Row="16">Hola 16</TextBlock>
<TextBlock Grid.Row="17">Hola 17</TextBlock>
</Grid>
</ScrollViewer>
</Grid>

Strange Windows Phone ListBoxItem Layout

I have a ListBox in my XAML
<ListBox x:Name="ListBox" ItemTemplate="{StaticResource ListBoxDataTemplate}"
BorderThickness="0" />
ListBoxDataTemplate is
<DataTemplate x:Key="ListBoxDataTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="34" />
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="Wrap" FontSize="18"
Grid.Column="0">A QUICK BROWN</TextBlock>
<Image Grid.Column="1" Margin="4,0,4,0"
Width="30" Height="30" Source="ms-appx:///Assets/Dark/icon.arrowright.png" />
</Grid>
</DataTemplate>
But when I run this on emulator, instead of the the Image align to right in row,
the Image position is right after Text A QUICK BROWN.
Here screenshot from emulator,
XAML code is here : http://pastebin.com/GVqC2Si9
Because your grid column for the image is only 34
change it to
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
I would also add HorizontalAlignment="Right" to the image xaml
EDIT
tried your code and notice you had to add HorizontalContentAlignment
<ListBox x:Name="ListBox" ItemTemplate="{StaticResource ListBoxDataTemplate}" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>

How to make a TextBox same width as parent view

I have tried both with width="auto" and HorizontalAlignment="Stretch", but both of them do not give me the result I want. It seems that the width of the text box is always based on the size of the header of the text box. Why?
This is the XMAL:
<ListView Width="auto">
<TextBox Width="auto"
Header="Please Enter Email Address"/>
<TextBox HorizontalAlignment="Stretch"
Header="Please Enter Email address"/>
</ListView>
This is the output:
This is what I am looking for:
I get the above screenshot by setting the width to a fixed values. But I want to find a way to let the text box automatically resize base on the parent view (for example a ListView in this case).
Edit:
Based on Alan's answer, it works great in portrait mode. But still not taking the full width in landscape.
<ListView x:Name="lv" Width="auto">
<TextBox Width="{Binding ElementName=lv, Path=ActualWidth}"
Header="Please Enter Email Address"/>
<TextBox Width="{Binding ElementName=lv, Path=ActualWidth}"
Header="Please Enter Email address"/>
</ListView>
Left Image: portrait mode; Right Image: landscape mode.
Edit 2:
I notice that both #Alan's answer and #Jogy's answer are both okay if the parent view is <Page>. However, if the parent view is <ContentDialog>, neither of them works. As a matter of fact, if the parent view is <Page>, simple using this <TextBox Width="auto"/> will works as expected. There may be obvious thing about Windows Phone I don't understand.
Instead of binding the Width, try to add this below the opening ListView tag:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
[UPDATE]
Apparently there is a problem with ContentDialog and landscape mode.
Check this thread:
https://social.msdn.microsoft.com/Forums/en-US/6c8ad10c-3b27-4991-9a5a-8cb15b338709/contentdialog-behavior-in-landscape-orientation?forum=wpdevelop
If you set the background color of the List to Red, you will see that the whole List is cropped when the phone is in Landscape mode.
Bind the Width to its parent control's ActualWidth like below:
<ListView x:Name="lv" Width="auto">
<TextBox Width="{Binding ElementName=lv, Path=ActualWidth}"
Header="Please Enter Email Address"/>
<TextBox Width="{Binding ElementName=lv, Path=ActualWidth}"
Header="Please Enter Email address"/>
</ListView>
[Update]
Because the actualwidth property will not be updated on orientation change. Let's try a different way:
<Page.Resources>
<Style TargetType="ListViewItem" x:Key="StretchedListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</Page.Resources>
<Grid>
<ListView ItemContainerStyle="{StaticResource StretchedListViewItem}" x:Name="lv" Width="auto">
<TextBox Width="auto"
Header="Please Enter Email Address"/>
<TextBox Width="auto"
Header="Please Enter Email address"/>
</ListView>
</Grid>
[Update 2]
[Why]
This is a very interesting topic, it's about how to override the Control's default style.
Let me explain why we cannot make our previous solution for Page to work in ContentDialog. It's because the ContentDialog has the following default style in generic.xaml(you can find in the windows phone 8.1 sdk):
<!-- Default style for Windows.UI.Xaml.Controls.ContentDialog -->
<!-- NOTE: Because this type didn't ship in WinBlue, we use a prefix to trick the
XAML parser to not only consider its own type table when parsing, even though
this exists in a jupiter-owned namespace. -->
<Style TargetType="controls:ContentDialog">
<Setter Property="Background" Value="{ThemeResource ContentDialogBackgroundThemeBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:ContentDialog">
<Border x:Name="Container">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Orientation">
<VisualState x:Name="Portrait" />
<VisualState x:Name="Landscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="ContentPanel" EnableDependentAnimation="True">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ContentDialogContentLandscapeWidth}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="HorizontalAlignment" Storyboard.TargetName="ContentPanel">
<DiscreteObjectKeyFrame KeyTime="0" Value="Left" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border x:Name="BackgroundElement"
Background="{TemplateBinding Background}"
FlowDirection="LeftToRight">
<Border FlowDirection="{TemplateBinding FlowDirection}">
<Grid x:Name="ContentPanel">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="{ThemeResource ContentDialogTitleMinHeight}" />
<RowDefinition Height="Auto" MinHeight="{ThemeResource ContentDialogContentMinHeight}" />
<RowDefinition Height="Auto" MinHeight="{ThemeResource ContentDialogButtonsMinHeight}" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentControl x:Name="Title"
Margin="{ThemeResource ContentDialogTitleMargin}"
Content="{TemplateBinding Title}"
ContentTemplate="{TemplateBinding TitleTemplate}"
FontSize="{StaticResource TextStyleExtraLargeFontSize}"
FontFamily="{ThemeResource PhoneFontFamilyNormal}"
FontWeight="SemiBold"
Grid.ColumnSpan="2" />
<ContentPresenter x:Name="Content"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
FontSize="{StaticResource TextStyleLargeFontSize}"
FontFamily="{ThemeResource PhoneFontFamilyNormal}"
Margin="{ThemeResource ContentDialogContentMargin}"
Grid.Row="1"
Grid.ColumnSpan="2" />
<Border x:Name="Button1Host" Padding="{ThemeResource ContentDialogButton1HostPadding}" Grid.Row="2" />
<Border x:Name="Button2Host" Padding="{ThemeResource ContentDialogButton2HostPadding}" Grid.Row="2" Grid.Column="1" />
</Grid>
</Border>
</Border>
</Grid >
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The interest things which cause the difference from Page:
the margins of title and content were set to(suggest to keep it):
ContentDialogTitleMargin 19,33.5,19,0
ContentDialogContentMargin 19,16.5,19,0
2: the width in Landscape mode was set to:
...
<x:Double x:Key="ContentDialogContentLandscapeWidth">400</x:Double>
...
the HorizontalAlignment in Landscape mode was set to:
Value="Left"
[Solution]
In addition to the steps I provided before(just need to change the Page.Resources to ContentDialog.Resources), we need to do the following steps
To solve the issue, add the following into your App.xaml:
<Application.Resources>
<Style x:Key="FullScreenContentDialogStyle" TargetType="ContentDialog">
<Setter Property="Background" Value="{ThemeResource ContentDialogBackgroundThemeBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentDialog">
<Border x:Name="Container">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Orientation">
<VisualState x:Name="Portrait" />
<VisualState x:Name="Landscape">
<Storyboard>
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="ContentPanel" EnableDependentAnimation="True">
<DiscreteObjectKeyFrame KeyTime="0" Value="Auto" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="HorizontalAlignment" Storyboard.TargetName="ContentPanel">
<DiscreteObjectKeyFrame KeyTime="0" Value="Stretch" />
</ObjectAnimationUsingKeyFrames>-->
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border x:Name="BackgroundElement"
Background="{TemplateBinding Background}"
FlowDirection="LeftToRight">
<Border FlowDirection="{TemplateBinding FlowDirection}">
<Grid x:Name="ContentPanel">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="{ThemeResource ContentDialogTitleMinHeight}" />
<RowDefinition Height="Auto" MinHeight="{ThemeResource ContentDialogContentMinHeight}" />
<RowDefinition Height="Auto" MinHeight="{ThemeResource ContentDialogButtonsMinHeight}" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentControl x:Name="Title"
Margin="{ThemeResource ContentDialogTitleMargin}"
Content="{TemplateBinding Title}"
ContentTemplate="{TemplateBinding TitleTemplate}"
FontSize="{StaticResource TextStyleExtraLargeFontSize}"
FontFamily="{ThemeResource PhoneFontFamilyNormal}"
FontWeight="SemiBold"
Grid.ColumnSpan="2" />
<ContentPresenter x:Name="Content"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
FontSize="{StaticResource TextStyleLargeFontSize}"
FontFamily="{ThemeResource PhoneFontFamilyNormal}"
Margin="{ThemeResource ContentDialogContentMargin}"
Grid.Row="1"
Grid.ColumnSpan="2" />
<Border x:Name="Button1Host" Padding="{ThemeResource ContentDialogButton1HostPadding}" Grid.Row="2" />
<Border x:Name="Button2Host" Padding="{ThemeResource ContentDialogButton2HostPadding}" Grid.Row="2" Grid.Column="1" />
</Grid>
</Border>
</Border>
</Grid >
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
And here is the CustomContentDialog.xaml:
<ContentDialog
x:Class="CSharpWP81.CustomContentDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CSharpWP81"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="DIALOG TITLE"
PrimaryButtonText="sign in"
SecondaryButtonText="cancel"
PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
SecondaryButtonClick="ContentDialog_SecondaryButtonClick"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Style="{StaticResource FullScreenContentDialogStyle}">
<ContentDialog.Resources>
<Style TargetType="ListViewItem" x:Key="StretchedListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ContentDialog.Resources>
<StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ListView ItemContainerStyle="{StaticResource StretchedListViewItem}" x:Name="lv">
<TextBox Width="auto"
Header="Please Enter Email Address"/>
<TextBox Width="auto"
Header="Please Enter Email address"/>
</ListView>
</StackPanel>
</ContentDialog>

disable click event everywhere when Process Ring is Active in Windows phone 8.1

I have a XAML Page in that i have putted various control for login, whenever i click on Login Button , process will start for authenticate the user ,process ring is activated at the start of Login_click event and it will stop at the end of that event.
i Just want that during that process no buddy can click on any control of the page.
i think it is possible from both the methods from c# and also from and XAML
<Grid>
<ProgressRing Name="prcsring1" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="200" Background="Transparent" Canvas.ZIndex="9999"/>
<Grid Margin="0,0,0,0" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<!--1-->
<RowDefinition />
<!--2-->
<RowDefinition />
<!--3-->
<RowDefinition />
<!--4-->
<RowDefinition />
<!--5-->
<RowDefinition />
<!--6-->
<RowDefinition />
<!--7-->
<RowDefinition Height="25" />
<!--8-->
<RowDefinition Height="60"/>
<!--9-->
<RowDefinition Height="20"/>
<!--10-->
<RowDefinition />
<!--11-->
<RowDefinition Height="40"/>
<!--12-->
<RowDefinition />
<!--13-->
<RowDefinition Height="70" />
<!--14-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0" x:Name="stackpanHead1" Background="#424242" />
<Image x:Name="imgstatusGreen" Visibility="Collapsed" Source="../Images/Confirmed Images/index_green1.png" HorizontalAlignment="Right" Margin="0,21,10,0" VerticalAlignment="Top" Width="20" />
<Image x:Name="imgstatusRed" Source="../Images/Confirmed Images/index_red1.png" Visibility="Collapsed" HorizontalAlignment="Right" Margin="0,21,10,0" VerticalAlignment="Top" Width="20" />
<Image x:Name="imgstatusOrange" Source="../Images/Confirmed Images/Orange.png" Visibility="Collapsed" HorizontalAlignment="Right" Margin="0,21,10,0" VerticalAlignment="Top" Width="20" />
<TextBlock Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center" Margin="0,10,0,0" Foreground="#5C5C5C" FontSize="50" FontWeight="Bold" TextWrapping="Wrap" Text="Welcome to" />
<Image Grid.Column="0" Grid.Row="2" x:Name="imglogo" Source="../Images/alogo.png" Margin="40,0,40,0" VerticalAlignment="Center" />
<TextBlock Grid.Column="0" Grid.Row="3" FontSize="30" Margin="0,0,0,0" TextWrapping="Wrap" FontWeight="Bold" TextAlignment="Center" Text="Your Gateway to" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="#5C5C5C" />
<TextBlock Grid.Column="0" Grid.Row="4" FontSize="30" Margin="0,0,0,0" TextWrapping="Wrap" FontWeight="Bold" TextAlignment="Center" Text="e-Government and Visas" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="#5C5C5C" />
<Border Grid.Column="0" Grid.Row="5" Margin="50,5,50,5" Name="cornradusername" CornerRadius="10" Height="40" BorderThickness="2" Background="White" BorderBrush="Black" >
<TextBox x:Name="txtusername" BorderBrush="Transparent" BorderThickness="0" VerticalAlignment="Center" TextWrapping="Wrap" Text="" PlaceholderText="User Name" Background="White" />
</Border>
<Border Grid.Column="0" Grid.Row="6" Name="cornradpass" CornerRadius="10" Margin="50,5,50,5" Height="40" BorderThickness="2" Background="White" BorderBrush="Black" >
<PasswordBox x:Name="txtpass" BorderBrush="Transparent" BorderThickness="0" VerticalAlignment="Center" PlaceholderText="Password" Background="White" />
</Border>
<TextBlock Grid.Column="0" Grid.Row="7" Name="lblwrong" FontSize="15" Margin="0,0,0,0" TextWrapping="Wrap" TextAlignment="Center" Text="" FontWeight="Bold" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="Red" Width="390"/>
<TextBlock Grid.Column="0" Grid.Row="8" FontSize="15" Margin="0,0,0,0" TextWrapping="Wrap" TextAlignment="Center" Text="Enter credentials To Authenticate" HorizontalAlignment="Center" Foreground="#5C5C5C"/>
<WebView Grid.Column="0" Grid.Row="9" Name="WebView2" Margin="0,0,0,0" Width="360" Height="30" HorizontalAlignment="Center" />
<HyperlinkButton Grid.Column="0" Grid.Row="10" Foreground="#086A87" FontFamily="Arial Black" FontWeight="Bold" FontSize="20" Content="Forgot password? click here.." HorizontalAlignment="Center" Click="HyperlinkButton_Click"/>
<Grid Grid.Column="0" Grid.Row="11" Margin="0,0,0,0" Background="White">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.Row="0" Content="Login" Margin="0,0,5,0" x:Name="btnlogin1" HorizontalAlignment="Right" Click="Button_Click" BorderThickness="0" Foreground="White">
<Button.Background>
<ImageBrush ImageSource="../Images/button_green.png"/>
</Button.Background>
</Button>
<Button Grid.Column="1" Grid.Row="0" Margin="5,0,0,0" Content="New User" x:Name="btnnewuser1" HorizontalAlignment="left" BorderThickness="0" Foreground="White">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="../Images/button_green.png"/>
</Button.Background>
</Button>
</Grid>
<TextBlock Grid.Column="0" Grid.Row="12" VerticalAlignment="Center" FontSize="15" Margin="0,0,0,0" TextWrapping="Wrap" TextAlignment="Center" Text="Version: 1.79" HorizontalAlignment="Center" Foreground="#5C5C5C"/>
<StackPanel Grid.Column="0" Grid.Row="13" x:Name="Add" Background="Aqua" />
</Grid>
</Grid>
private async void Button_Click(object sender, RoutedEventArgs e)
{
Ringprocess_Activate(prcsring1);
----------------------My Code for Process--------------------
Ringprocess_DeActivate(prcsring1);
}
Can be as simple as
private async void Button_Click(object sender, RoutedEventArgs e)
{
this.IsEnabled = false; // disable the page
Ringprocess_Activate(prcsring1);
// .. your code
Ringprocess_DeActivate(prcsring1);
this.IsEnabled = true; // enable the page
}
If you do it this way make sure you comment out any StoryBoard that enables the "Disable" state, other wise, it will kinda grey out the controls which you probably don't want on that RingProcess Control.