I have a XAML Page where I have 4 Grids (rectGrid, dateGrid, roomGrid, optionGrid) , 3 of them (rectGrid, dateGrid, roomGrid) are created dynamically (in Code Behind)
What i want to do is that the rectGrid is scrollable Horizontal and Vertical, but the roomGrid only Horizontal and the dateGrid only vertical
Here's the Code
<ScrollViewer Height="Auto" Width="Auto" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">
<Grid>
<Grid Name="optionsGrid">
<Label Name="lZeit" Content="Zeitraum: von" Margin="100,7,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"></Label>
<DatePicker Name="dpVon" Margin="192,7,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Height="23"></DatePicker>
<Label Name="lBis" Content="bis" Margin="372,7,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"></Label>
<DatePicker Name="dpBis" Margin="440,8,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Height="23"></DatePicker>
<Button Content="OK" Height="23" HorizontalAlignment="Left" Margin="620,6,0,0" Name="selectDates" VerticalAlignment="Top" Width="60" RenderTransformOrigin="-2.552,0.522" Click="selectDates_Click"/>
<Button Content="Drucken" Height="23" HorizontalAlignment="Left" Margin="740,6,0,0" Name="print" VerticalAlignment="Top" Width="60" RenderTransformOrigin="-2.552,0.522" Click="print_Click"/>
</Grid>
<Grid HorizontalAlignment="Stretch" Margin="100,70" Name="rectGrid" VerticalAlignment="Stretch" OpacityMask="Black" Opacity="1" ShowGridLines="False" Height="Auto" Width="Auto">
</Grid>
<Grid Height="30" HorizontalAlignment="Stretch" Margin="98,31,0,0" Name="dateGrid" VerticalAlignment="Top" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="656*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="1129*"/>
</Grid.ColumnDefinitions>
</Grid>
<Grid HorizontalAlignment="Left" Height="Auto" Width="82" Name="roomGrid" Margin="0,70">
</Grid>
</Grid>
</ScrollViewer>
Here's a Screenshot:
enter image description here
Instead of placing the Grids in a ScrollViewer, do this;
<Grid Name="optionsGrid" ScrollViewer.HorizontalScrollBarVisibility="Visible">
OR
<Grid Name="optionsGrid" ScrollViewer.VerticalScrollBarVisibility="Visible">
I don't really understand your question or the naming of the Grids so you will need to change that as you see fit.
I have solved it.
<Grid HorizontalAlignment="Stretch" Name="rectGrid" VerticalAlignment="Stretch" OpacityMask="Black" Opacity="1" ShowGridLines="False" Height="Auto" Width="Auto">
</Grid>
</ScrollViewer>
Related
I have the following XAML markup, which I am trying to use to display a WebKitBrowser below some buttons on the the GUI of my application:
<DockPanel VerticalAlignment="Stretch" Height="Auto" HorizontalAlignment="Stretch" Width="Auto">
<Grid x:Name="browserGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Style="{DynamicResource NoChromeButton}" Click="backBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" Height="30" Width="40" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1">
<Image Source="C:\...\arrow_left.png" Height="30" Width="40" />
</Button>
<Button Style="{DynamicResource NoChromeButton}" Click="RefreshBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" Height="30" Width="40" VerticalAlignment="Top" Grid.Row="1" Grid.Column="2" >
<Image Source="C:\...\arrow_loop3.png" Height="30" Width="30" />
</Button>
<Button Style="{DynamicResource NoChromeButton}" Click="printBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" Height="30" Width="30" VerticalAlignment="Top" Grid.Row="1" Grid.Column="3">
<Image Source="C:\...\printer.png" Height="30" Width="30" />
</Button>
<Button Style="{DynamicResource NoChromeButton}" Name="referBtn" Click="referThis" Margin="0,0,0,0" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Height="30" Width="80" VerticalAlignment="Top" Grid.Row="1" Grid.Column="4">
<TextBlock>Refer</TextBlock>
</Button>
<Grid x:Name="grdBrowserHost" Height="650" Width="900" Margin="0,0,0,0" Grid.Row="2" Grid.Column="3"></Grid>
<!--/StackPanel-->
</Grid>
</DockPanel>
Basically, what I want to do, is display the buttons in a row above the WebKitBrowser, (which will be displayed inside the grdBrowserHost, to create a sort of 'navigation bar' inside the <DockPanel>
But for some reason, with what I'm doing above, I get the buttons displayed in the first few columns of the <grid>, and the browser displayed in the last column, but it's displayd 'next to' the buttons, rather than 'underneath, so the layout looks messy:
How can I fix the layout so that the WebKitBrowser content is displayed below the buttons, and not next to them? As you can see, I tried putting the grdBrowserHost grid (where the WebKitBrowser is displayed) inside the second row of the layout (i.e. one row below the row where the buttons are displayed), but this doesn't make any difference... anyone have any suggestions?
Edit
I tried setting the DockPanel.Dock="Bottom", as suggested in the answer, but this just seemed to cause the WebKitBrowser to be displayed 'on top' of some of the other elements being displayed on my GUI, so that the layout now looks like:
As you can see, the browser is now displayed 'on top' of a couple of the buttons that I had previously added to my GUI, instead of underneath them, like I want it to, or beside them, like it was before...
I have set all of the buttons to: DockPanel.Dock="Top", and the browser to DockPanel.Dock="Bottom"... but for some reason, the browser is displayed on top of the right-most couple of buttons...
The line I'm now using to add the browser to the GUI is:
<Grid x:Name="grdBrowserHost" Height="650" Width="900" Margin="0,0,0,0" Grid.Row="2" Grid.Column="3" DockPanel.Dock="Bottom"></Grid>
If I remove the grdBrowserHost's Row & Column, then the web browser takes up the whole GUI, and completely hides the buttons I've added:
Any other suggestions?
You need to set the Dock property of the controls you want to move around. So therefore:
<DockPanel VerticalAlignment="Stretch" Height="Auto" HorizontalAlignment="Stretch" Width="Auto">
<Grid x:Name="browserGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Style="{DynamicResource NoChromeButton}" Click="backBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" Height="30" Width="40" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1">
<Image Source="C:\...\arrow_left.png" Height="30" Width="40" />
</Button>
<Button Style="{DynamicResource NoChromeButton}" Click="RefreshBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" Height="30" Width="40" VerticalAlignment="Top" Grid.Row="1" Grid.Column="2" >
<Image Source="C:\...\arrow_loop3.png" Height="30" Width="30" />
</Button>
<Button Style="{DynamicResource NoChromeButton}" Click="printBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" Height="30" Width="30" VerticalAlignment="Top" Grid.Row="1" Grid.Column="3">
<Image Source="C:\...\printer.png" Height="30" Width="30" />
</Button>
<Button Style="{DynamicResource NoChromeButton}" Name="referBtn" Click="referThis" Margin="0,0,0,0" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Height="30" Width="80" VerticalAlignment="Top" Grid.Row="1" Grid.Column="4">
<TextBlock>Refer</TextBlock>
</Button>
<Grid x:Name="grdBrowserHost" DockPanel.Dock="Bottom" Height="650" Width="900" Margin="0,0,0,0" ></Grid>
<!--/StackPanel-->
</Grid>
</DockPanel>
Note the DockPanel.Dock = "Bottom" in the grid named grdBrowserHost. You will also need to remove the grdBrowserHosts column/row property as you want its parent to be the dockpanel, not the grid.
I should ponit out that the Buttons you have will default to DockPanel.Dock="Left" as this is the default when not defined
I have a "GroupBox" which to maximize the window I subrepone to others "GroupBox"
No way to fix it. Anyone?
This is the XAML. This is the xml do not know if there is way to add some definition to fix, any label or something.
<UserControl x:Class="Laboratorio.Calibracion"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="490" d:DesignWidth="660">
<Grid>
<GroupBox Header="Calibracion" Margin="0,0,0,10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<GroupBox Grid.Row="0" Grid.Column="0" Header="Equipo">
<Grid>
<Label x:Name="serialLbl" Content="Serial:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0"/>
<TextBox x:Name="serialTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" Margin="85,10,0,0"/>
<TextBox x:Name="descripcionTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="144" Margin="209,10,0,0" IsEnabled="False"/>
<Label x:Name="resolucionLbl" Content="Resolucion:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,41,0,0"/>
<TextBox x:Name="resolucionTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" Margin="85,41,0,0"/>
</Grid>
</GroupBox>
<GroupBox Grid.Row="0" Grid.Column="1" Header="Patron">
<Grid>
<Label x:Name="patronLbl" Content="Patron:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0"/>
<ComboBox x:Name="comboBox" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Margin="106,10,0,0"/>
<Label x:Name="patronLbl_Copy" Content="Niv. Referencia:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,80,0,0"/>
<TextBox x:Name="resolucionTxb_Copy" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" Margin="106,80,0,0"/>
<Label x:Name="patronLbl_Copy1" Content="Fluido:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,41,0,0"/>
<ComboBox x:Name="comboBox_Copy" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Margin="106,41,0,0"/>
</Grid>
</GroupBox>
<GroupBox Grid.Row="1" Grid.Column="0" Header="Condificones">
<Grid>
<Label x:Name="temperaturaLbl" Content="Temperatura:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0"/>
<TextBox x:Name="temperaturaTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="36" Margin="94,10,0,0"/>
<Label x:Name="humedadLbl" Content="Humedad:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="135,10,0,0"/>
<TextBox x:Name="humedadTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="35" Margin="205,10,0,0"/>
</Grid>
</GroupBox>
<GroupBox Grid.Row="2" Grid.Column="0" Header="Comprobacion Inicial">
<Grid>
<DataGrid x:Name="compInicialDgv">
<DataGrid.Columns>
<DataGridTextColumn Header="Presion Patron"></DataGridTextColumn>
<DataGridTextColumn Header="Lecturas"></DataGridTextColumn>
<DataGridTextColumn Header="Error"></DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
</GroupBox>
<GroupBox Grid.Row="2" Grid.Column="1" Header="Segunda Secuencia">
<Grid>
<DataGrid x:Name="segSecDgv">
<DataGrid.Columns>
<DataGridTextColumn Header="Presion Patron"></DataGridTextColumn>
<DataGridTextColumn Header="Lecturas"></DataGridTextColumn>
<DataGridTextColumn Header="Error"></DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
</GroupBox>
</Grid>
</GroupBox>
</Grid>
You are using hardcoded size attributes (Margin, Width, Height, etc). I assume you designed it with drag-and-drop from the toolbox. You can get strange results when resizing the form with such hardcoded values.
I would recommend you change all of them to get rid of the hardcoded margins, edit the parent Grid to use RowDefinitions and ColumnDefinitions with appropriate sizing information (absolutes, Auto, *), set the Grid.Row Grid.Column Grid.ColumnSpan and Grid.RowSpan properties of the GroupBox controls, and then tweak the various sizing details (Margin, Padding, MinWidth, MinHeight, etc) as needed.
Do the same thing for any child Grid elements. You may also want to use other container elements.
Here is a slimmed-down example of what I'm talking about.
<Grid>
<GroupBox Header="Calibracion" Margin="0,0,0,10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" /> <!-- Or '*', 'Auto', etc -->
<ColumnDefinition Width="5*" /> <!-- Or '*', 'Auto', etc -->
</Grid.ColumnDefinitions>
<GroupBox Header="Equipo" Grid.Column="0" Grid.Row="0">
<!-- GroupBox contents here -->
</GroupBox>
<GroupBox Header="Patron" Grid.Column="1" Grid.Row="0">
<!-- GroupBox contents here -->
</GroupBox>
<GroupBox Header="Condificones" Grid.Column="0" Grid.Row="1">
<!-- GroupBox contents here -->
</GroupBox>
</Grid>
</GroupBox>
</Grid>
Metro, I have used this few days back and Now wish to add Flyout on scrollable window on bottom like fix menu bar. Is it possible?
Below is the code of XAML page for flyout genration, For temporary purpose I have added on top now,
<Controls:FlyoutsControl>
<Controls:Flyout Header="Actions" Name="TestFlyout" VerticalAlignment="Bottom" Position="Top" Width="990" Theme="Adapt">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"></ColumnDefinition>
<ColumnDefinition Width="20*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="Save" Width="70" Height="30" HorizontalAlignment="Left" Grid.Column="0"></Button>
<Button Content="Cancel" Width="70" Height="30" HorizontalAlignment="Left" Grid.Column="1"></Button>
</Grid>
</Controls:Flyout>
</Controls:FlyoutsControl>
Maybe you forgot to put your flyout in the flyouts. And you should use Position="Bottom" not VerticalAlignment="Bottom".
<Grid>
<ScrollViewer Name="scrlMain"
CanContentScroll="True"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
VerticalAlignment="Stretch">
<TextBlock Text="Test"></TextBlock>
</ScrollViewer>
<Controls:Flyout Header="Actions"
Name="TestFlyout"
IsOpen="True"
Position="Bottom"
Width="990"
Theme="Adapt">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"></ColumnDefinition>
<ColumnDefinition Width="20*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="Save"
Width="70"
Height="30"
HorizontalAlignment="Left"
Grid.Column="0"></Button>
<Button Content="Cancel"
Width="70"
Height="30"
HorizontalAlignment="Left"
Grid.Column="1"></Button>
</Grid>
</Controls:Flyout>
</Grid>
Hope this helps.
I have a C# WinRT/8.1 app that uses a ListView with a child stack panel to show items in a horizontal row. That works fine, except I am having the same problem discussed in this SO post:
WinRT Xaml ListView - Touch doesn't scroll well
Except worse. My items don't scroll even when the fingertip is pressed on the margin between items. Unfortunately I don't have a parent Panorama control or ScrollView control to blame. How can I fix this?
NOTE: I switched to a ListView from a GridView because of SO posts I read that indicated GridView's with horizontal items are problematic, which was the case for me.
Here is the XAML for the page:
<Page
<!-- headers snipped for brevity -->
<Page.Resources>
<Converters:DebugBindingConverter x:Key="DebugBindingConverter"/>
<Converters:VideomarkLocationToString x:Key="VideomarkLocationToString"/>
<common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<DataTemplate x:Key="HorzVideomarksItemTemplate1">
<Grid d:DesignWidth="977" d:DesignHeight="746" Height="121" Width="252">
<Grid.RowDefinitions>
<RowDefinition Height="20*"/>
<RowDefinition Height="52*"/>
<RowDefinition Height="23*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txtLocation" TextWrapping="Wrap" Text="{Binding OffsetSecs, Converter={StaticResource VideomarkLocationToString}}" Grid.Row="2" />
<TextBlock x:Name="txtNote" Text="{Binding Text}" TextTrimming="CharacterEllipsis"/>
<Image x:Name="imgThumbnail" Grid.Row="1" Source="{Binding ThumbnailAsync}"/>
<!-- <TextBlock x:Name="txtTest2" HorizontalAlignment="Left" Margin="81,93,0,0" TextWrapping="Wrap"
Text="{Binding Videomarks, Converter={StaticResource DebugBindingConverter}}" VerticalAlignment="Top" Height="87" Width="150" FontSize="12"/> -->
</Grid>
</DataTemplate>
</Page.Resources>
<Grid x:Name="gridPage"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="25" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="897*"/>
<ColumnDefinition Width="469*"/>
</Grid.ColumnDefinitions>
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="347*"/>
<RowDefinition Height="231*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid x:Name="gridTopRow" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,894,40" Tapped="pageTitle_Tapped"/>
<Button x:Name="exitButton"
Click="exitButton_Click"
Style="{StaticResource ClosePaneAppBarButtonStyle}" Margin="1065,27,0,9" Grid.Column="1" Width="100" Visibility="{Binding Main.IsDebuggerAttached, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}" />
<Button x:Name="btnTest" Content="test" Grid.Column="1" HorizontalAlignment="Left" Margin="883,59,0,0" VerticalAlignment="Top" FontSize="36" Click="btnTest_Click" Visibility="Collapsed"/>
</Grid>
<WebView x:Name="webViewVideoPlayer" Grid.Row="1" ScriptNotify="ScriptNotifyPlayLocation" Margin="25" />
<Button x:Name="btnVideomark" Content="Bookmark" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="578,53,0,0" Height="54" FontSize="26.667" Click="btnVideomark_Click" Width="181"/>
<ListView
x:Name="listviewVideomarks" Grid.Row="2" Grid.ColumnSpan="2" Opacity="1" IsHitTestVisible="False" Margin="20"
ItemsSource="{Binding Videomarks.VideomarksCollection, Source={StaticResource Locator}}"
ItemTemplate="{StaticResource HorzVideomarksItemTemplate1}" SelectionMode="None"
>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="stackVideomarksHorz" Orientation="Horizontal">
</StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
<Border x:Name="borderAddVideomark" BorderThickness="5" Grid.ColumnSpan="2" Margin="369,53,319,112" Grid.Row="1" BorderBrush="#FF144989" CornerRadius="25" Opacity="0" IsHitTestVisible="False" Loaded="border_Loaded">
<Grid x:Name="gridAddVideomark" IsHitTestVisible="False" Grid.ColumnSpan="2" Grid.Row="1" Opacity="1" Grid.RowSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="187*"/>
<ColumnDefinition Width="188*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="189*"/>
<RowDefinition Height="137*"/>
<RowDefinition Height="62*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="lblVideomarkLocation" Grid.Column="1" TextWrapping="Wrap" Text="TextBlock" Margin="40,10,10,10" FontSize="18.667"/>
<TextBox x:Name="txtVideomarkNote" Grid.Row="1" TextWrapping="Wrap" Grid.ColumnSpan="2" Margin="10,10,10,2"/>
<Button x:Name="btnOk" Content="OK" HorizontalAlignment="Left" Margin="92,10,0,0" Grid.Row="2" VerticalAlignment="Top" Width="192" Foreground="White" FontSize="21.333" Height="45" Click="btnOk_Click"/>
<Button x:Name="btnCancel" Content="Cancel" HorizontalAlignment="Left" Margin="88,10,0,0" Grid.Row="2" VerticalAlignment="Top" Width="192" Foreground="White" FontSize="21.333" Height="45" Grid.Column="1" Click="btnCancel_Click"/>
<Rectangle x:Name="rectVideomarkThumbnail" Fill="#FFF4F4F5" Stroke="Black" Margin="10"/>
</Grid>
</Border>
</Grid>
</Page>
I am not sure which directions you are trying to scroll, but I think your problem will be fixed if you disable the StackPanel scroll and enable scrolling in both directions on the ListView.
<ListView
x:Name="listviewVideomarks" Grid.Row="2" Grid.ColumnSpan="2" Opacity="1" IsHitTestVisible="False" Margin="20"
ItemsSource="{Binding Videomarks.VideomarksCollection, Source={StaticResource Locator}}"
ItemTemplate="{StaticResource HorzVideomarksItemTemplate1}" SelectionMode="None"
ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.VerticalScrollMode="Auto"
>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="stackVideomarksHorz" Orientation="Horizontal"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollMode="Disabled">
</StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
I have a ListBox with text and a corresponding Image. I would Like the Image to align right. How would i alter my XAML to achieve this? We are mainly looking at lbxBuiltInLevels. Thanks.
<Page x:Class="TheseusAndTheMinotaur.ChooseLevelPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="TheseusAndTheMinotaur"
mc:Ignorable="d"
Title="ChooseLevelPage">
<Grid Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.Background>
<ImageBrush ImageSource="/TheseusAndTheMinotaur;component/Images/MainBackground.jpg"/>
</Grid.Background>
<ListBox x:Name="lbxLevels" HorizontalAlignment="Left" Height="100" Margin="10,78,0,0" VerticalAlignment="Top" Width="100"/>
<Button x:Name="btnExit" Content="Exit" HorizontalAlignment="Left" Margin="10,208,0,0" VerticalAlignment="Top" Width="75" Click="btnExit_Click"/>
<Button x:Name="btnLoad" Content="Load" HorizontalAlignment="Left" Margin="10,183,0,0" VerticalAlignment="Top" Width="75" Click="btnLoadCustomLevel_Click"/>
<Label x:Name="lblSavedLevels" Content="Custom Levels" HorizontalAlignment="Left" Margin="10,20,0,0" VerticalAlignment="Top" FontSize="34" FontFamily="Papyrus" FontWeight="ExtraBold"/>
<Label x:Name="lblBuiltInLevels" Content="Built-in Levels" Grid.Column="1" HorizontalAlignment="Left" Margin="44,20,0,0" VerticalAlignment="Top" FontSize="34" FontWeight="ExtraBold" FontFamily="Papyrus"/>
<ListBox x:Name="lbxBuiltInLevels" Grid.Column="1" Margin="10,78,0,0" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Grid x:Name="gridForLevels">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="3" Text="{Binding Str}"/>
<ContentControl Grid.Column="1" Margin="0,0,10,0" Content="{Binding Image}" HorizontalAlignment="Right" HorizontalContentAlignment="Right" FlowDirection="RightToLeft"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Page>
Set this code in your listbox:
HorizontalContentAlignment="Stretch"
Should look like:
<ListBox x:Name="lbxBuiltInLevels" Grid.Column="1" HorizontalContentAlignment="Stretch" Margin="10,78,0,0" HorizontalContentAlignment="Stretch" VerticalAlignment="Top"