I am New WPF. I have PopupControl below is XAML for that:-
<Popup Name="PopupRemark" AllowsTransparency="True" Placement="Left" HorizontalOffset="45" VerticalOffset="-22"
PlacementTarget="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ToggleButton}}"
IsOpen="{Binding IsChecked, ElementName=btnInfo}" StaysOpen="False" >
<Canvas Width="230" Height="200" Background="Transparent" >
<Path x:Name="Container" Canvas.Left="0" Canvas.Top="0" Fill="#f2f6f7" Stroke="#A9A9A9"
Data="M 230,40 L220,50 220,90 0,90 0,0 220,0 220,30 230,40">
<Path.Effect>
<DropShadowEffect BlurRadius="18" Color="Black" Opacity="0.4"/>
</Path.Effect>
</Path>
<Label Grid.Row="0" FontSize="13" FontWeight="Bold" FontFamily="Roboto" Content="Remark" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Center"/>
<TextBlock Canvas.Left="5" Canvas.Top="25" Width="210" Text="{Binding Remark}" Foreground="#2c3e50" FontFamily="Roboto" FontSize="11" TextWrapping="Wrapwithoverflow" />
</Canvas>
</Popup>
Issue is, I want to set auto height & width for canvas or popup control so my popup will size as per content into it.I googled and knew that canvas should have fix height or width but is there any solution(Workaround) to make popup auto sizable.or how can add scroller into popup. It will be greatly appreciable
Thanks in advance
Related
we have a ComboBox and a Button next to eachother. They are in the same Grid.Rowin two different Grid.Columns.
However they both appeared to have a different size. Even by setting VerticalAlignment="Stretch" this did not change.
Last but not least I set an fixed height to both elements but they are still not the same size.
How dows that come and how can I change it?
Here is an image of the problem
This works on my sample app.
<Grid RowDefinitions="Auto,Auto">
<TextBlock Text="Test" Grid.Row="0" />
<Grid
Grid.Row="1"
ColumnDefinitions="Auto,Auto"
RowDefinitions="Auto,Auto">
<ComboBox
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Stretch"
CornerRadius="0"
SelectedIndex="0">
<TextBlock Text="Auswahlen" />
</ComboBox>
<Button
Grid.Row="1"
Grid.Column="1"
VerticalAlignment="Stretch"
CornerRadius="0">
<FontIcon
FontFamily="Segoe MDL2 Assets"
Glyph="" />
</Button>
</Grid>
</Grid>
I have two buttons on either side of a Label.
If either of these Buttons get removed, I want the Label to stay centered in a fixed position.
Is there any way to lock the position of this Label?
<DockPanel LastChildFill="True">
<DockPanel DockPanel.Dock="Top" Margin="4,8,4,8" LastChildFill="True">
<Button Name="SearchBackButton" Style="{DynamicResourceInfoButtonStyle}" Content="{StaticResource SearchBackButton}"
VerticalAlignment="Center" HorizontalAlignment="Left" Margin="4,0,0,0" BorderBrush="Transparent" Background="Transparent" DockPanel.Dock="Left" Click="SearchBackButton_Click" />
<Label HorizontalAlignment="Center" FontFamily="HelveticaNeue" FontSize="14" FontStyle="Normal" FontWeight="SemiBold" Foreground="#273238" Name="SuggestedTemplatesText" Content="{x:Static res:UIStrings.SuggestedTemplates}"/>
<Button Name="info_icon" Style="{DynamicResource InfoButtonStyle}" Click="InfoButton_Click"
VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,4,0" BorderBrush="Transparent" Background="Transparent" DockPanel.Dock="Right"/>
</DockPanel>
</DockPanel> <!-- Added by edit -->
This is the code for the Label and the two Buttons.
I try bind my Image size to slider, and put it to scroll viewer, but scroll viewer not working. I can't understand why.
<DockPanel Grid.Column="1">
<StackPanel DockPanel.Dock="Bottom" Height="30" HorizontalAlignment="Center" Orientation="Horizontal">
<Button Margin="2,2,2,2" Content="From file" Click="Button_Click"></Button>
<Button Margin="2,2,2,2" Click="delImageClick" ToolTip="Delete">
<Image Source="Resources/empty_trash-48.png"></Image>
</Button>
<Slider x:Name="sldZoom" Orientation="Horizontal" Minimum="1" Maximum="250" HorizontalAlignment="Stretch" MinWidth="100" Value="100"/>
</StackPanel>
<Grid>
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">
Image Name="previewImg" Source="{Binding SelectedItem, ElementName=dataGrid , UpdateSourceTrigger=PropertyChanged}" Stretch="Uniform" RenderTransformOrigin="0, 0" >
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.01" ScaleY="0.01"/>
<ScaleTransform>
<ScaleTransform.ScaleX>
<Binding ElementName="sldZoom" Path="Value" Mode="OneWay"/>
</ScaleTransform.ScaleX>
<ScaleTransform.ScaleY>
<Binding ElementName="sldZoom" Path="Value" Mode="OneWay"/>
</ScaleTransform.ScaleY>
</ScaleTransform>
</TransformGroup>
</Image.RenderTransform>
</Image>
</ScrollViewer>
</Grid>
</DockPanel>
Also I try put my Image into Dock and grid,It did not work either
example on this image
I should be using LayoutTransform instead of RenderTransform in my Image.
WPF - Zooming in on an image inside a scroll viewer, and having the scrollbars adjust accordingly
I tried this, but I can't scroll the canvas. I tried to handle mousewheel change event of other controls but scrolling is not working. Anybody has idea what I am doing wrong ?
<Viewbox Stretch="Fill" StretchDirection="Both" Height="300" Width="300">
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled" Margin="20,0,20,0" Height="300" Width="300">
<Canvas Background="White" Height="300" Width="500">
<TextBlock FontSize="20" Text="This Is Far Right" Canvas.Left="350" Foreground="Black" />
</Canvas>
</ScrollViewer>
</Viewbox>
Try specify width and height of the canvas bigger than the outer element, eg.
<Canvas Background="White" Width="500" Height="500" />
ScrollViewer.VerticalScrollMode="Disabled" solved my problem.
I have a strange issue, I tried every trick I knew to centre align the ListView placed inside a grid. No matter what, it looks like it is left aligned. The width and height of the ListView is data bound. (Width can take values 350 or 700 and height can take 100 or 200 depending on the Size settings. If size settings is compact it should be 350x100 and and if normal 700x200).
This is the xaml code
<Grid x:Name="GridPageLVPortrait" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4" Background="Beige" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,0,584.714,0" Width="781">
<ListView x:Name="PageLVPortrait" ItemsSource="{Binding}" CanReorderItems="True" AllowDrop="True" HorizontalAlignment="Center" SelectionMode="Single" IsSwipeEnabled="True" IsItemClickEnabled="True" SelectionChanged="PageLVPortraitSelectionChanged" ItemClick="PageLVPortraitItemClick" Height="{Binding TemplateHeight}" Width="{Binding TemplateWidth}" >
<ListView.ItemTemplate>
<DataTemplate>
<Canvas HorizontalAlignment="Center" Width="{Binding TemplateWidth}" Height="{Binding TemplateHeight}">
<Canvas.Background>
<ImageBrush ImageSource="{Binding PageBackground}"/>
</Canvas.Background>
<Image HorizontalAlignment="Center" Height="{Binding TemplateHeight}" Width="{Binding TemplateWidth}" Source="{Binding Page}" Stretch="None" Opacity="1" CacheMode="BitmapCache" />
<StackPanel x:Name="EditDeleteStackPanel" Width="{Binding TemplateWidth}" Height="{Binding TemplateHeight}" Opacity="0.95">
<Button x:Name="NoteDelete" HorizontalAlignment="Right" VerticalAlignment="Top" Foreground="{x:Null}" Tapped="NoteDelete_Tapped" MinWidth="50" MinHeight="50" Margin="0,0,10,0" BorderBrush="{x:Null}" >
<Button.Background>
<ImageBrush ImageSource="{Binding Delete}"/>
</Button.Background>
</Button>
<Button x:Name="NoteEdit" HorizontalAlignment="Right" VerticalAlignment="Top" FontFamily="Segoe Script" FontSize="24" BorderBrush="{x:Null}" Tapped="NoteEdit_Tapped" Foreground="{x:Null}" MinWidth="50" MinHeight="50" Margin="0,0,10,0">
<Button.Background>
<ImageBrush ImageSource="{Binding Edit}"/>
</Button.Background>
</Button>
</StackPanel>
</Canvas>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Could someone kindly help?
I've tried your code, in a whole page Grid with the normal dimension convention you provided (700x200). The listview does get center aligned if I ignore the grid's Margin="0,0,584.714,0". If you need the 584px in the right of the page, I'd say better put a grid's column there with that width.
I had found the issue. It is because the main grid is spit into 4 columns. And since this one uses columnspan, the alignment gets messed up.