I'm trying to debugging a binding issue in a command. Enabled all the tracing in the options menu, added listeners on xaml and on app (like suggested here https://spin.atomicobject.com/2013/12/11/wpf-data-binding-debug/) but still there's no way to get error in the output window.
This is the XAML that is causing me problems. Added non existing binding but not able to get tracing
<Page
x:Class="EyesGuard.Views.Pages.CustomPause"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:c="clr-namespace:EyesGuard.Views.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:lang="clr-namespace:EyesGuard.Localization"
xmlns:local="clr-namespace:EyesGuard.Views.Pages"
xmlns:l="clr-namespace:EyesGuard.Localization"
xmlns:diag="clr-namespace:System.Diagnostics;assembly=WindowsBase"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="{lang:LocalizedString 'EyesGuard.CustomPause.PageTitle'}"
d:DesignHeight="450"
x:Name="this"
FlowDirection="{lang:LocalizedFlowDirection}"
d:DesignWidth="550"
Background="#FF006A9F"
FontFamily="{StaticResource HastiUI.Fonts.IRANSans}"
Loaded="Page_Loaded"
mc:Ignorable="d">
<Grid>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock
FontSize="20"
Foreground="White"
Text="{lang:LocalizedString 'EyesGuard.CustomPause.Message'}" />
<StackPanel
Grid.Row="2"
Grid.Column="2"
Margin="5"
Orientation="Horizontal">
<c:NumOnlyTextbox
MinWidth="50"
Margin="0"
MaxLength="2"
Style="{DynamicResource WhiteTextBox}"
Text="{Binding Path=HoursCustomPause}"
TextAlignment="Center" />
<TextBlock
Margin="5,0,0,0"
VerticalAlignment="Center"
Foreground="White"
Text="{lang:LocalizedString 'EyesGuard.Settings.TimeSeparators.Hour'}" />
<c:NumOnlyTextbox
MinWidth="50"
Margin="5,0,0,0"
MaxLength="2"
Style="{DynamicResource WhiteTextBox}"
Text="{Binding Path=MinutesCustomPause}"
TextAlignment="Center" />
<TextBlock
Margin="5,0,0,0"
VerticalAlignment="Center"
Foreground="White"
Text="{lang:LocalizedString 'EyesGuard.Settings.TimeSeparators.Minutes'}" />
<c:NumOnlyTextbox
MinWidth="50"
Margin="5,0,0,0"
MaxLength="2"
Style="{DynamicResource WhiteTextBox}"
Text="{Binding Path=SecondssCustomPause}"
TextAlignment="Center" />
<TextBlock
Margin="5,0,0,0"
VerticalAlignment="Center"
Foreground="White"
Text="{lang:LocalizedString 'EyesGuard.Settings.TimeSeparators.Second'}" />
</StackPanel>
<Button
Width="120"
Margin="0,10,0,0"
Padding="10,4"
Command="{Binding Path=PauseProtection, diag:PresentationTraceSources.TraceLevel=High}"
Content="{lang:LocalizedString 'EyesGuard.CustomPause.ButtonText'}"
Style="{DynamicResource ButtonTemplate.Green}" />
</StackPanel>
</Grid>
Related
I have a XAML window that the layout is done using a main grid. The problem is when the browser is resized the controls in the second and third columns move to the right and the window's layout is no longer correct. I have pasted the XAML below. I think the layout of a WPF window should be grid based with all controls residing in the window's master grid. Is this the proper layout design for WPF or is there a different recommended layout pattern?
<Window x:Class="MasterPage.Intake1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:v="clr-namespace:MasterPage.View"
Title="Intake 1" Height="900" Width="1000" Background="#FFD9DDE8" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35*"/>
<RowDefinition Height="45*"/>
<RowDefinition Height="190*"/>
<RowDefinition Height="275*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500*"/>
<ColumnDefinition Width="300*"/>
<ColumnDefinition Width="250*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="0">
<Image Source="Images\header.jpg" Height="47" Margin="0,0,0,0" />
</StackPanel>
<StackPanel HorizontalAlignment="Left" Grid.Column="0" Height="80" Width="350" Grid.ColumnSpan="1" Grid.Row="1" Margin="0,-23,0,0">
<Image Source="Images\DSPASS_logo.png" Stretch="Fill" DockPanel.Dock="Top" Height="70" />
</StackPanel>
<StackPanel Grid.Column="4" Grid.Row="1" Grid.ColumnSpan="1" Margin="0,0,0,0">
<TextBlock FontSize="15" Margin="0,0,0,0" Height="25" Width="300" TextWrapping="WrapWithOverflow">
<Label FontSize="10" Name="Namelabel" Width="250" FontWeight="Bold" Foreground="#1664A1" Content="Welcome to DS PASS:"/>
</TextBlock>
</StackPanel>
<StackPanel Grid.Column="0" Grid.Row="2" HorizontalAlignment="Left" Margin="10,10,0,0" Height="290" Width="975" VerticalAlignment="Top" Grid.ColumnSpan="3" Grid.RowSpan="1">
<Label Height="36" FontSize="16" Content="Post Identification" Background="#FF014E7E" FontWeight="Bold" Foreground="White" Margin="-5,0,-18,0"/>
<StackPanel x:Name="_wordLength" Orientation="Horizontal" Margin="235,0,200,0">
<TextBlock Height="20" x:Name="ApplicantType_TextBlock" Text="Applicant Type" Width="110" Margin="5" TextAlignment="Right"/>
<ComboBox Height="25" x:Name="textBoxWordLength" Width="400" Margin="10,5"/>
</StackPanel>
<StackPanel x:Name="_integerWordLength" Orientation="Horizontal" Margin="235,0,200,0">
<TextBlock Height="20" x:Name="textBlockIntegerWordLength" Text="Person Type" Width="110" Margin="5" TextAlignment="Right"/>
<ComboBox Height="25" x:Name="textBoxIntegerWordLength" Width="400" Margin="10,5"/>
</StackPanel>
<StackPanel x:Name="_Post" Orientation="Horizontal" Margin="235,0,200,20">
<TextBlock Height="20" x:Name="Post_TextBlock" Text="Post" Width="110" Margin="5" TextAlignment="Right"/>
<ComboBox Height="25" x:Name="Post_TextBox" Width="400" Margin="10,5"/>
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="0" Grid.Row="3" HorizontalAlignment="Left" Height="130" Margin="15,-120,0,0" VerticalAlignment="Top" Grid.ColumnSpan="3" >
<Label Height="36" FontSize="16" Content="Applicant Employment" Background="#FF004A78" FontWeight="Bold" Foreground="White" Margin="-5,0,-18,0"/>
<StackPanel x:Name="_max1" Orientation="Vertical" Margin="1,0,355,0">
<TextBlock Height="20" x:Name="maxTextBlock1" Text="Employee ID" Width="100" Foreground="Black" Margin="0,15,459,5" TextAlignment="Right"/>
<TextBox Height="25" x:Name="maxTextBox1" Width="400" Margin="0,-5,90,25"/>
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="3" Orientation="Vertical" HorizontalAlignment="Left" Height="330" Margin="0,10,0,0" VerticalAlignment="Top" Width="965" Grid.RowSpan="2">
<Label Height="36" FontSize="16" Content="English Version of Name" Background="#FF005183" Grid.Row="4" FontWeight="Bold" Margin="10,10,0,0" Foreground="White" Padding="4,5,5,5"/>
<StackPanel x:Name="_LastName" Orientation="Vertical">
<TextBlock Height="20" x:Name="LastName_TextBlock" Text="Last Name/Surname" Margin="55,5,459,5" TextAlignment="Left"/>
<TextBox Height="25" x:Name="LastName_TextBox" Width="500" Margin="55,5,459,5"/>
</StackPanel>
<StackPanel x:Name="_FirstName" Orientation="Vertical">
<TextBlock Height="20" x:Name="FirstName_TextBlock" Text="First Name" Margin="55,0,459,0" TextAlignment="Left"/>
<TextBox Height="25" x:Name="FirstName_TextBox" Width="500" Margin="55,0,459,0"/>
</StackPanel>
<StackPanel x:Name="_MiddleName" Orientation="Vertical">
<TextBlock Height="20" x:Name="MiddleName_TextBlock" Text="Middle Name" Margin="55,5,459,5" TextAlignment="Left"/>
<TextBox Height="25" x:Name="MiddleName_TextBox" Width="500" Margin="55,5,459,5"/>
</StackPanel>
<StackPanel x:Name="_ExtendedName" Orientation="Vertical">
<TextBlock Height="20" x:Name="ExtendedName_TextBlock" Text="Extended name (Tribal, Jr., III, etc.)" Margin="55,5,372,5" TextAlignment="Left"/>
<TextBox Height="25" x:Name="Extended_TextBox" Width="500" Margin="55,5,459,5"/>
</StackPanel>
</StackPanel>
<StackPanel Grid.RowSpan="4" Grid.Column="4" HorizontalAlignment="Left" Height="230" Margin="-250,400,0,0" Width="480" Grid.ColumnSpan="1">
<StackPanel x:Name="_Aliases" Orientation="Vertical" Margin="-15,0,0,0" Height="144">
<TextBlock Height="20" x:Name="Aliases_TextBlock" Text="Aliases" Margin="40,-5,0,5" TextAlignment="Left"/>
<TextBox Height="25" x:Name="Aliases_TextBox" Width="500" Margin="43,5"/>
<TextBox Height="25" x:Name="Aliases_TextBox1" Width="500" Margin="43,5"/>
<TextBox Height="25" x:Name="Aliases_TextBox2" Width="500" Margin="43,5"/>
</StackPanel>
</StackPanel>
<!--<Label HorizontalAlignment="Left" Margin="4,132,0,0" Grid.Row="3" VerticalAlignment="Top" Background="#FF72C772" Grid.ColumnSpan="3" Width="1242" Height="36"/>
<Button Content="Continue" Grid.Column="2" HorizontalAlignment="Left" Margin="16,139,0,0" Grid.Row="3" VerticalAlignment="Top" Width="125" Click="Page1_Continue_Click"/>
<Button Content="Save Draft" Grid.Column="1" HorizontalAlignment="Left" Margin="336,139,0,0" Grid.Row="3" VerticalAlignment="Top" Width="125"/>-->
<Label HorizontalAlignment="Left" Margin="4,400,0,0" Grid.Row="4" VerticalAlignment="Top" Background="#FF52BB52" Grid.ColumnSpan="3" Width="983" Height="36">
</Label>
<Button Content="Save Draft" Grid.Column="1" HorizontalAlignment="Left" Margin="150,408,0,0" Grid.Row="5" VerticalAlignment="Top" Width="125" />
<Button x:Name="ContinueButton_Page2" Content="Continue" Grid.Column="1" Width="125" Grid.Row="5" VerticalAlignment="Top" Margin="200,408,0,0" Grid.ColumnSpan="2" Click="btnContinue_Click"/>
</Grid>
</Window>
When you want control of the alignment during resizing, think Grid. In more complex situations, think Grids inside a Grid. A picture says it better
You have your MainGrid with only rows, no columns. The blue headers get rows of their own and
the orange containers are Grids themselves (with possibly a margin left and right).
Now you shouldn't try to divide the available space with all "...*" width values.
In this example you could use it for dead space only, e.g. the yellow columns with Width="*".
The blue columns would be Width="Auto" (or pixels).
Topping it off with a MinWidth for the Window corresponding with the width you need for the bottom Grid. Also consider wrapping your MainGrid in a ScrollViewer.
What I needed was to not allow resizing of the web browser. To do this I removed the minimize/maximize buttons To do that I used the following attribute:
ResizeMode="NoResize"
I have a long list coming from my Business logic which I need to display on the UI. As the list is long, I tried adding Scrollviewer but I am unable to scroll.
please find the XAML code below
<Grid Margin="0,32,0,0">
<TextBlock Text="{Binding IDC_WiFi, Source={StaticResource Resources}}" FontFamily="Segoe UI" FontSize="20" Foreground="#4cb5ab" HorizontalAlignment="Left" />
<Button Command="{Binding HardwareWifiAccordionCommand}" BorderThickness="0" Width="16" HorizontalAlignment="Right" Height="16" >
<Button.Background>
<ImageBrush ImageSource="{Binding AccordionImageHardwareWifi}" />
</Button.Background>
</Button>
</Grid>
<TextBlock Text="Klein's, Anil's" FontFamily="Segoe UI" FontSize="15" Foreground="#8fa3ad"/>
<StackPanel Height="200" Visibility="{Binding IsAccordionHardwareWifi, Converter={StaticResource Bool2Visible}}">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding WifiList,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,32,0,0">
<Grid>
<Image Source="/Images/Assets/da_wifi1_16x16.png" Height="16" Width="16" HorizontalAlignment="Left" />
<TextBlock Margin="25,0,0,0" Text="{Binding NetworkName}" FontSize="15" Foreground="#FFFFFF" />
<TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Right" />
</Grid>
<TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Left" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</StackPanel>
Put it into a ScrollViewer.
<ScrollViewer>
<StackPanel >
</StackPanel>
</ScrollViewer>
As #StepUp points out you can just wrap it with a ScrollViewer but I believe this breaks virtualization. That's outside the scope of this question of course but it's something to keep in mind. If performance is likely to become an issue then I'd suggest implementing this as shown in the answer to this question.
The scrollviewer needed a Height to be set
<Grid Margin="0,32,0,0">
<TextBlock Text="{Binding IDC_WiFi, Source={StaticResource Resources}}" FontFamily="Segoe UI" FontSize="20" Foreground="#4cb5ab" HorizontalAlignment="Left" />
<Button Command="{Binding HardwareWifiAccordionCommand}" BorderThickness="0" Width="16" HorizontalAlignment="Right" Height="16" >
<Button.Background>
<ImageBrush ImageSource="{Binding AccordionImageHardwareWifi}" />
</Button.Background>
</Button>
</Grid>
<TextBlock Text="Klein's, Anil's" FontFamily="Segoe UI" FontSize="15" Foreground="#8fa3ad"/>
<StackPanel Height="200" Visibility="{Binding IsAccordionHardwareWifi, Converter={StaticResource Bool2Visible}}">
<ScrollViewer VerticalScrollBarVisibility="Auto" Height="350">
<ItemsControl ItemsSource="{Binding WifiList,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,32,0,0">
<Grid>
<Image Source="/Images/Assets/da_wifi1_16x16.png" Height="16" Width="16" HorizontalAlignment="Left" />
<TextBlock Margin="25,0,0,0" Text="{Binding NetworkName}" FontSize="15" Foreground="#FFFFFF" />
<TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Right" />
</Grid>
<TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Left" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</StackPanel>
I've been working on how to do layouts and I've come across something that is bugging the heck out of me. Now, if I use the code below, the window takes up the entirety of my screen.
<Window x:Class="HDD_Drill_View.Windows.WndwMain"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="HDDC"
WindowStartupLocation="CenterScreen"
Name="wndwMain"
Closing="WindowClosing"
ResizeMode="NoResize"
WindowState="Normal"
SizeToContent="WidthAndHeight">
<Grid>
<DockPanel Width="Auto"
LastChildFill="False"
HorizontalAlignment="Left">
<DockPanel.Background>
<ImageBrush ImageSource="..\Resources\background.png"
Stretch="UniformToFill"
TileMode="None" />
</DockPanel.Background>
<StackPanel DockPanel.Dock="Top"
Height="Auto"
Width="Auto"
Orientation="Horizontal"
HorizontalAlignment="Center">
<Button HorizontalAlignment="Left"
Name="bttnGenerateReports"
VerticalAlignment="Top"
UseLayoutRounding="False"
Click="BttnGenerateReportsClick"
Margin="10">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"><Run Text="Generate" /><LineBreak /><Run Text=" Reports" /></TextBlock>
</Button>
<Button HorizontalAlignment="Left"
Name="bttnSurveyReport"
VerticalAlignment="Top"
UseLayoutRounding="False"
Click="BttnSurveyReportClick"
Margin="10">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"><Run Text="Survey" /><LineBreak /><Run Text="Report" /></TextBlock>
</Button>
<Button HorizontalAlignment="Left"
Name="bttnTimeChart"
VerticalAlignment="Top"
UseLayoutRounding="False"
Click="BttnTimeChartClick"
Margin="10">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"><Run Text=" Time" /><LineBreak /><Run Text=" Chart" /></TextBlock>
</Button>
<Button HorizontalAlignment="Left"
Name="bttnMaterialAcquisition"
VerticalAlignment="Top"
UseLayoutRounding="False"
Click="BttnMaterialAcquisitionClick"
Margin="10">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"><Run Text=" Material" /><LineBreak /><Run Text="Acquistion" /></TextBlock>
</Button>
</StackPanel>
<StackPanel DockPanel.Dock="Bottom"
Height="Auto"
Width="Auto"
Orientation="Horizontal">
<!--MaxWidth="800"
MaxHeight="80"-->
<StackPanel.Background>
<ImageBrush ImageSource="..\Resources\drildata2.jpg" />
</StackPanel.Background>
</StackPanel>
</DockPanel>
</Grid>
</Window>
Yet, if I uncomment the Max Height and Max Width in the last StackPanel, then it seems fine. Basically, I'm wanting my background image to NOT affect my window size. Is this possible? I'm trying to set the background of a StackPanel to an image.
Remove the SizeToContent="WidthAndHeight" from the Window.
I have implemented a ScrollViewer around the content panel grid in my Windows Phone 7 page. However, whenever I try and scroll down to the bottom of the page, it snaps right back to it's original position the moment I take my finger off the screen. In other words on scrolling it does not retain it's last position rendering the scroll pointless.
This is my page code:
<phone:PhoneApplicationPage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:GalaSoft_MvvmLight_Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP71" x:Class="StepsForWater.Views.Submit"
mc:Ignorable="d"
d:DesignWidth="480"
d:DesignHeight="696"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"
Orientation="Portrait"
shell:SystemTray.IsVisible="True"
DataContext="{Binding Submit, Source={StaticResource Locator}}">
<!-- Sample code showing usage of ApplicationBar -->
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton x:Name="appbar_About" IconUri="/Images/appbar_button1.png" Text="About" Click="appbar_About_Click"/>
<shell:ApplicationBarIconButton x:Name="appbar_WalkRun" IconUri="/Images/appbar_button2.png" Text="Walk/Run" Click="appbar_WalkRun_Click"/>
<!--<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem x:Name="menuItem1" Text="MenuItem 1"></shell:ApplicationBarMenuItem>
<shell:ApplicationBarMenuItem x:Name="menuItem2" Text="MenuItem 2"></shell:ApplicationBarMenuItem>
</shell:ApplicationBar.MenuItems>-->
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.Background>
<ImageBrush ImageSource="/StepsForWater;component/Images/submit-bg.png" />
</Grid.Background>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel"
Grid.Row="0"
Margin="12,17,0,28">
<!--<TextBlock x:Name="ApplicationTitle"
Text="MY APPLICATION"
Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="PageTitle"
Text="page name"
Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}" />-->
</StackPanel>
<ScrollViewer>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,-241" Background="{x:Null}">
<TextBlock Height="30" HorizontalAlignment="Left" Margin="38,57,0,0" x:Name="tBlk_Username" Text="{Binding UserName}" VerticalAlignment="Top" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="27,79,0,0" x:Name="tb_UserNameVal" Text="{Binding UserNameValue, Mode=TwoWay}" VerticalAlignment="Top" Width="423" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="38,169,0,0" x:Name="tBlk_Email" Text="{Binding Email}" VerticalAlignment="Top" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="38,278,0,0" x:Name="tBlk_Message" Text="{Binding Message}" VerticalAlignment="Top" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="27,191,0,0" x:Name="tb_EmailVal" Text="{Binding EmailValue, Mode=TwoWay}" VerticalAlignment="Top" Width="423" />
<TextBox Height="153" HorizontalAlignment="Left" Margin="27,300,0,0" x:Name="tb_MessageVal" Text="{Binding MessageValue, Mode=TwoWay}" VerticalAlignment="Top" Width="423" />
<CheckBox Content="{Binding Location}" Height="72" HorizontalAlignment="Left" Margin="27,459,0,0" x:Name="chk_Location" VerticalAlignment="Top" />
<Button Content="{Binding Submit}" Height="72" HorizontalAlignment="Left" Margin="27,761,0,0" x:Name="btn_Submit" VerticalAlignment="Top" Width="160" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<GalaSoft_MvvmLight_Command:EventToCommand x:Name="SubmitClick" Command="{Binding SubmitCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<TextBlock Height="30" HorizontalAlignment="Left" Margin="50,540,0,0" Name="tBlk_PicInfo" Text="{Binding PictureInfo}" VerticalAlignment="Top" Grid.Row="1" />
<Image Height="150" HorizontalAlignment="Left" Margin="50,583,0,0" Name="img_FlickrPic" Stretch="Fill" VerticalAlignment="Top" Width="200" Grid.Row="1" Source="{Binding ImageSource}"/>
<Button Content="Capture" Height="72" HorizontalAlignment="Left" Margin="267,0,0,138" Name="btn_Capture" VerticalAlignment="Bottom" Width="160" d:LayoutOverrides="GridBox" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<GalaSoft_MvvmLight_Command:EventToCommand x:Name="CaptureClick" Command="{Binding CaptureCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</Grid>
</ScrollViewer>
</Grid>
Update: Fixed my problem, all I needed to do was to ensure that my scrollviewer's height was less than that of it's contained grid!
As mentioned by others you should probably rethink the way your making your layout. There are cleaner options. But to answer your question, there were two problems. The first is that you need to specify a Height on the ScrollViewer.
<ScrollViewer Height="760">
....
</ScrollViewer>
The second problem is the negative margin of 241 you have applied to the grid. Simply take that off. It's preventing anything within that range of being scrolled to.
<Grid x:Name="ContentPanel" Margin="12,0,12,0">
....
</Grid>
And that should do it.
Hello all I have a usercontrol that I have defined as a data template. What I trying to do is have the results returned in a wrap panel and have each result returned in a tile format. I have this all working and the resutls are returned properly. However I have within the data template items that I would like the user to click upon. (scrollviewer to scroll data, buttons to click and text to select)/ Currently when you click on the selected item the item is selected but it is as if everything inside the listbox item is locked ( not selectable).
I'd appreciate any suggestions as to what I am missing here. Listed below is my code for the user controls and how I reference the wrap panel from app.xaml
SearchResultTileControl.xaml
<UserControl x:Class="UI.Search.Controls.SearchResultTileControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:dts="clr-namespace:UI.Search.Commands"
xmlns:formatter="clr-namespace:UI.Search.Commands"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:qr="clr-namespace:UI.Search.Controls.tiles"
d:DesignHeight="300"
d:DesignWidth="400"
mc:Ignorable="d">
<Grid x:Name="LayoutRoot" >
<ListBox x:Name="ResultListBox"
HorizontalAlignment="Stretch"
Background="{x:Null}"
BorderThickness="0"
HorizontalContentAlignment="Stretch"
ItemsPanel="{StaticResource ResultsItemsControlPanelTemplate}"
ItemContainerStyle="{StaticResource ListBoxItemStyle1}"
ItemsSource="{Binding SearchResults[0].Results}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<formatter:TypeTemplateSelector Content="{Binding}" HorizontalContentAlignment="Stretch">
<!-- Person Template -->
<formatter:TypeTemplateSelector.PersonTemplate>
<DataTemplate>
<qr:ucTilePerson />
</DataTemplate>
</formatter:TypeTemplateSelector.PersonTemplate>
<!-- Incident Template -->
<formatter:TypeTemplateSelector.IncidentTemplate>
<DataTemplate>
<qr:ucTileIncident />
</DataTemplate>
</formatter:TypeTemplateSelector.IncidentTemplate>
</formatter:TypeTemplateSelector>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Within the Usercontrol ucTilePerson.xaml I have the template setup as:
<UserControl x:Class="UI.Search.Controls.tiles.ucTilePerson"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:formatter="clr-namespace:UI.Search.Commands"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
Width="300"
Height="250"
d:DesignHeight="250"
d:DesignWidth="300"
IsHitTestVisible="False"
mc:Ignorable="d">
<UserControl.Resources>
<formatter:TileHighlightConverter x:Key="FormatConverter" />
</UserControl.Resources>
<Grid x:Name="PersonLayoutRoot">
<Rectangle Style="{StaticResource TileBackground}" />
<ScrollViewer Margin="5" BorderBrush="{x:Null}">
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<StackPanel Margin="0,0,0,2" Orientation="Horizontal">
<StackPanel>
<Image Width="48"
Height="48"
Source="/Images/search/person.png" />
<TextBlock Style="{StaticResource TileRelevance}" Text="{Binding Relevance}" />
</StackPanel>
<StackPanel>
<HyperlinkButton Content="{Binding Type}" Style="{StaticResource TypeHyperlinkButton}" />
<TextBox Margin="0,0,0,2"
Style="{StaticResource TileTextBox}"
Text="{Binding Content[AgencyName]}"
TextWrapping="Wrap" />
</StackPanel>
</StackPanel>
<toolkit:WrapPanel Margin="0,0,0,2">
<TextBlock Style="{StaticResource TileLabel}" Text="Name" />
<TextBox Margin="0,0,3,0"
Style="{StaticResource TileTextBox}"
Text="{Binding Content[lastname]}" />
<TextBox Margin="0,0,3,0"
Style="{StaticResource TileTextBox}"
Text="{Binding Content[firstname]}" />
<TextBox Style="{StaticResource TileTextBox}" Text="{Binding Content[middlename]}" />
</toolkit:WrapPanel>
<Border Style="{StaticResource TileBorder}">
<toolkit:WrapPanel Orientation="Horizontal">
<StackPanel Style="{StaticResource TileVerticalStackPanel}">
<TextBlock Style="{StaticResource TileLabel}" Text="Race" />
<TextBox Style="{StaticResource TileTextBox}" Text="{Binding Content[race]}" />
</StackPanel>
<StackPanel Style="{StaticResource TileVerticalStackPanel}">
<TextBlock Style="{StaticResource TileLabel}" Text="Sex" />
<TextBox Style="{StaticResource TileTextBox}" Text="{Binding Content[sex]}" />
</StackPanel>
<StackPanel Style="{StaticResource TileVerticalStackPanel}">
<TextBlock Style="{StaticResource TileLabel}" Text="DOB" />
<TextBox Style="{StaticResource TileTextBox}" Text="{Binding Content[dob]}" />
</StackPanel>
</toolkit:WrapPanel>
</Border>
<Border Style="{StaticResource TileBorder}">
<toolkit:WrapPanel Orientation="Horizontal">
<StackPanel Style="{StaticResource TileVerticalStackPanel}">
<TextBlock Style="{StaticResource TileLabel}" Text="Involvement" />
<TextBox Style="{StaticResource TileTextBox}" Text="{Binding Content[involvementtype]}" />
</StackPanel>
<StackPanel Style="{StaticResource TileVerticalStackPanel}">
<TextBlock Style="{StaticResource TileLabel}" Text="Associated Event" />
<TextBox Style="{StaticResource TileTextBox}" Text="{Binding Content[0].EventAssociation}" />
<HyperlinkButton Content="{Binding Content[0].EventID}" Style="{StaticResource TileResultLink}" />
</StackPanel>
</toolkit:WrapPanel>
</Border>
<Border Style="{StaticResource TileBorder}">
<ContentControl Width="256"
Margin="0,0,6,0"
BorderThickness="0"
Content="{Binding HitContext,
Converter={StaticResource FormatConverter}}"
FontSize="11" />
</Border>
</StackPanel>
</ScrollViewer>
</Grid>
And then I set reference to the wrap panel used in the listboxt ItemsPanel in my app.xaml
<ItemsPanelTemplate x:Key="ResultsItemsControlPanelTemplate">
<toolkit:WrapPanel/>
</ItemsPanelTemplate>
I suspect this is something in the Listbox styles that may be preventing this but I am not positive.
Thanks again for any suggestions,
Cheers
Discovered the issue. Within the usercontrol (ucTilePerson) I had IsHitTestVisible set to false. Since it was set at the user control level all elements inherited this property which is why I was getting the effect of not being able to raise any mouse events on anything.
No idea why I set that there other than it was late in the day.
Cheers