I have a grid with 4 columns. In the first column is a Canvas with a ZIndex of 99 and inside that is an expander. The expand direction is set to RIGHT. When I click on the header, the expander expands OVER TOP of column 2...which is exactly what I want. I'm trying to replicate this (only the opposite direction) inside column 4, so that when expanded, it will show over column 3. Even though I've marked the ExpandDirection of the second expander to "Left", it still expands to the right, and off the screen.
Here is the working expander:
<Canvas Grid.Column="0" Panel.ZIndex="99" Grid.RowSpan="4" VerticalAlignment="Stretch" Margin="0,5">
<Expander ExpandDirection="Right" Style="{DynamicResource OptionsExpanderStyle}" VerticalAlignment="Stretch" Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}">
<Border BorderBrush="Black" BorderThickness="0,0,2,0">
<Grid Background="White">
</Grid>
</Border>
</Expander>
</Canvas>
Here is the broken expander:
<Canvas x:Name="rightCanvas" Panel.ZIndex="99" Grid.RowSpan="4" Grid.Column="3" Margin="0,5">
<Expander ExpandDirection="Left" Style="{DynamicResource OptionsExpanderStyle}" HorizontalAlignment="Right" VerticalAlignment="Stretch" Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}">
<Border BorderBrush="Black" BorderThickness="2,0,0,0">
<Grid Background="White" Width="150">
</Grid>
</Border>
</Expander>
</Canvas>
Do not use canvas.
Try something like that:
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Background="LightBlue"
TextAlignment="Center" Text="Left Column"/>
<TextBlock Grid.Column="1" Background="LightCoral"
TextAlignment="Center" Text="Right Column"/>
</Grid>
<Expander Background="LightGray" ExpandDirection="Right"
Header="LeftMenu" VerticalAlignment="Top" HorizontalAlignment="Left">
<StackPanel Width="200">
<TextBlock Text="Some menu stuff"/>
<TextBlock Text="Some more"/>
</StackPanel>
</Expander>
<Expander Background="LightGray" ExpandDirection="Left"
Header="RightMenu" VerticalAlignment="Top" HorizontalAlignment="Right">
<StackPanel Width="200" >
<TextBlock Text="Some menu stuff"/>
<TextBlock Text="Some more"/>
</StackPanel>
</Expander>
</Grid>
Related
I have below WPF TextBlock within a border:
<Border Visibility="{Binding Path=BlinkOn, Converter={StaticResource BoolToVis}}" BorderThickness="1" BorderBrush="Red" CornerRadius="5" Margin="5">
<TextBlock x:Name="lblStoryboard"
TextAlignment="Center"
Padding="5"
Width="Auto"
Background="Red"
Foreground="Black"
FontSize="12.5"
FontWeight="Bold"
Style="{StaticResource BlinkingTextBlock}"
Text="Hi there!"
TextWrapping="WrapWithOverflow"
Visibility="{Binding Path=BlinkOn, Converter={StaticResource BoolToVis}}">
</TextBlock>
</Border>
Now I am trying to insert an inline image in front of the Textblock text, I mean, to the left (left side) of the TextBlock text and in the same line. How can I do this?
Add Stackpanel with Horizontal Orientation.
I have removed the binding since it as nothing to do with Adding image.
<Border BorderThickness="1" BorderBrush="Red" CornerRadius="5" Margin="5">
<StackPanel Orientation="Horizontal" Margin="0,0,0,-1">
<Image Source="C:\Users\Administrator\source\repos\WpfApp4\WpfApp4\Koala.jpg" Margin="0,459,0,0" />
<TextBlock x:Name="lblStoryboard"
HorizontalAlignment="Center"
TextAlignment="Center"
Padding="5"
Width="Auto"
Background="Red"
Foreground="Black"
FontSize="12.5"
FontWeight="Bold"
Text="Hi there!"
TextWrapping="WrapWithOverflow" Margin="0,459,0,0"
/>
</StackPanel>
</Border>
In my ContentDialog. On focus any element, type TextBox, the keyboard appear. When Keyboard appear, have a big margin above( so 20-30 px maybe). This space is the same height of the space allocated for Primary and Secondary Buttons. If have this margin, my content have a scrollbar and I do not want it. I have space sufficient to show all content of my dialog if remove this margin/padding of course.
This topic is related with: ContentDialog Windows 10 Mobile XAML - FullScreen - Padding
<StackPanel Orientation="Horizontal">
<TextBox x:Name="txtUser" IsSpellCheckEnabled="False"
Background="Black" Foreground="Red BorderBrush="Red" BorderThickness="1"
PlaceholderText="Digit your username"
GotFocus="txtUser_GotFocus" Style="{StaticResource TextBoxStyle}"
TextChanged="txtUser_TextChanged"
/>
<Button x:Name="MakeOff"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton x:Name="btnRegisterTwo"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button x:Name="MakeOffThree"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
</StackPanel>
</Grid>
Someone help to remove this?
Thanks
Interestingly, the ContentScrollViewer inside the style is given a fixed height during run-time, and a hack is to remove this x:Name from the ScrollViewer.
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" ZoomMode="Disabled" Margin="{ThemeResource ContentDialogContentScrollViewerMargin}" IsTabStop="False">
Also, you will need to add the RowDefinitions back to the root panel LayoutRoot in the style.
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
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
I have a long list seector that shows an image, two textblocks (name and description and other image to share the item. The problem is that the description and the usually are larger than the size of the piece of grid where they are so I can show only the beginning. What I want is scroll automatically the text of the textblocks to the left using an animation to show it completely. Is this posible?
The code of my xaml project is this.
<phone:LongListSelector x:Name="GaleryLongListSelector" SelectionChanged="GaleryLongListSelector_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="100" toolkit:TiltEffect.IsTiltEnabled="True" Grid.Column="0">
<Image Width="80" RenderTransformOrigin="0.5,0.5" Height="80" Source="{Binding ThumbImage}" Margin="5,0">
<Image.RenderTransform>
<RotateTransform Angle="90"/>
</Image.RenderTransform>
</Image>
<StackPanel Orientation="Vertical">
<TextBlock x:Name="txtProjectName" Text="{Binding Name}" Margin="5,10,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" />
<TextBlock x:Name="txtProjectDescript" Text="Aqui iria una descripcion muy larga del faldksjfjkldjfkldajsfkljaslfkjasldfjlasdjfkl" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" />
</StackPanel>
</StackPanel>
<Image Source="/Images/share.png" Width="80" Tap="Image_Tap" Grid.Column="1" HorizontalAlignment="Right"/>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu IsZoomEnabled="True" x:Name="ContextMenu" >
<toolkit:MenuItem Header="{Binding Source={StaticResource LocalizedStrings}, Path=LocalizedResources.MainPagePanoramaItemGalleryContextMenuDelete}" Click="Delete_Click"/>
<toolkit:MenuItem Header="{Binding Source={StaticResource LocalizedStrings}, Path=LocalizedResources.MainPagePanoramaItemGalleryContextMenuRename}" Click="Rename_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Grid>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
Any help is appreciated.
What I meant in my comment is, have you tried using this :
<ScrollViewer>
<TextBlock Text="Mon texte de test" />
</ScrollViewer>
If your text is too long, it should make it scrollable.
Then you just have to create your animation, to automatically scroll it
EDIT
Just wrap the description TextBlock in an ScrollViewer and set the HorizontalScrollBarVisibility to auto.
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<TextBlock x:Name="txtProjectDescipt" .../>
</ScrollViewer>
In my app I'm having a ListBox that I have already set it's ItemTemplate, and it's working just fine. But after facing some problems I decided to change the ListBox into an ItemsControl,
So I just changed the ListBox keyword with ItemsControl, (whitch I don't know if it's allowed). But when I run the app an InvalidCastExeption is unhandeled at the InitializeComponent.
I am still new to programming so can anyone help me with this?
EDIT:
<ListBox Name="ChannelsSearchResaultList" Visibility="Collapsed" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Name="ChannelContainer" Margin="5" Width="470"
HorizontalAlignment="Stretch" BorderBrush="BlueViolet"
BorderThickness="2" Background="#FF1D1D1D" MouseLeftButtonDown=
"Border_MouseLeftButtonDown" MouseLeftButtonUp=
"ChannelContainer_MouseLeftButtonUp">
<Grid Height="110">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="340"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Logo}" Margin="5"/>
<TextBlock Text="{Binding Duration}" Margin="10,5"
VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
<Canvas Grid.Column="1" >
<TextBlock Text="{Binding Title}" FontWeight="Bold"
Foreground="Red"/>
<TextBlock Text="{Binding Views}" Canvas.Top="60"
Canvas.Left="20" />
</Canvas>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>